2015-06-12 3 views
0

Справочная информацияJavascript - петля через таблицу и проверьте значение

У меня есть две таблицы, одна из которых представляет собой список доступных пользователей, называется «пользователи», а другой называется «SELECTED_USERS». Когда строка из таблицы пользователей щелкнули, приложение добавить/удалить запись из таблицы SELECTED_USERS

<table id=users> 
<tr class="odd" role="row" id="row_89"><td>89</td><td>John Doe</td><td>23819</td><td>[email protected]</td></tr> 
<tr class="even" role="row" id="row_90"><td>90</td><td>John Doe</td><td>23819</td><td>36338</td></tr> 
<tr class="odd" role="row" id="row_91"><td>91</td><td>Jane Doe</td><td>23820</td><td>[email protected]</td></tr> 
<tr class="even" role="row" id="row_92"><td>92</td><td>Jane Doe</td><td>23820</td><td>28519</td></tr> 
<tr class="odd" role="row" id="row_93"><td>93</td><td>Jim Bob</td><td>23801</td><td>[email protected]</td></tr> 
</table> 

<table id=selected_users class="table table-condensed table-bordered" width="80%"> 
     <tr class="info"><td colspan="4"><b>Selected Users:</b></td></tr> 
</table> 

Вопрос

мне нужно изменить существующую логику так, что, когда строка в наличии список пользователей, все остальные строки в таблице доступных пользователей, которые имеют соответствующий «pid» (который является третьим столбцом), должны быть добавлены в таблицу selected_users.

Это код, который срабатывает, когда кто-то нажимает на имеющемся пользователей таблице:

$('#users tbody').on('click', 'tr', function() { 
     var id = this.id; 
     var tr; 
     tr=$('<tr/>'); 

     var index = $.inArray(id, selected); 
     if (index === -1) { 
      selected.push(id); //select/highlight in list of available users. 

      // Find td's inside this tr and add to selected_users table 
      var tds = $(this).find('td'); 
      tr.append("<td>" + tds.eq(0).text() + "</td>"); 
      tr.append("<td>" + tds.eq(1).text() + "</td>"); 
      tr.append("<td>" + tds.eq(2).text() + "</td>"); 
      tr.append("<td>" + tds.eq(3).text() + "</td>"); 
      tr. attr('id', id.substring(4)); 
      $('#selected_users').append(tr); 

      //loop through the avail users table and select all records with the same p number. 
      $("users td").each(function(i,o){ 
       // new code goes here 
      } 
     } else { 
      selected.splice(index, 1); //deselect from list of avail users 
      //remove matching record from selected_users table. 
      var record_id = id.substring(4); 
      var rowtodelete = document.getElementById(record_id); 
      rowtodelete.parentNode.removeChild(rowtodelete); 
     } 
     $(this).toggleClass('selected'); 
    }); 
}); 

То, что я до сих пор

Я думаю о добавлении кода, как это (псевдо код) в разделе с комментарием «новый код здесь идет»

 //loop through the avail users table and select all records with the same pager number. 
     $("users tr").each(function(){ 
      $(this).find('td .... 
     }); 

Я не уверен, как это сделать находку, чтобы увидеть, если третий столбец соответствует тому, что я имею в tds.eq (2) .text()

Любые предложения будут оценены

EDIT 1

Это то, что я до сих пор:

 //2015.06.11 - find and add all other rows with matching p number 
      var thisTR = $(this); 
      console.log(thisTR); 
      //select all siblings with same value in third column 
      thisTR.siblings().filter(function() { 
        console.log($('td',this).eq(2).text()); 
        //console.log($('td', thisTR).eq(2).text()); 
        if ($('td',this).eq(2).text() == $('td', thisTR).eq(2).text()) { 
          console.log("i found a match"); 
          console.log("what is the row for: " + $('td',this).eq(2).text()); 
        }; 
      }); 

Мне просто нужен способ определить строку, где найден соответствующий td, а затем сделать что-то похожее на то, что я уже делаю, чтобы добавить строку в selected_users: var tr; tr = ""; ... найдите строку, а затем ... tr.append ("" + tds.eq (0) .text() + ""); tr.append ("" + tds.eq (1) .text() + ""); tr.append ("" + tds.eq (2) .text() + ""); tr.append ("" + tds.eq (3) .text() + ""); tr. attr ('id', id.substring (4)); $ ('# selected_users'). Append (tr);

ответ

1

Вот что вы можете использовать - .filter(function)

//save a reference of the current row 
var thisTR = $(this); 

//select all siblings with same value in third row 
thisTR.siblings().filter(function() { 
    return $('td',this).eq(2).text() == $('td', thisTR).eq(2).text(); 
}) 

//Iterate through them and do what needs to be done. 
.each(function() { 
    //do something 
    //here 'this' refers to tr (matched row) 
    //$('td', this) should give you all the tds in 'this' row 
}); 
+0

@PeterAK, см. Мой EDIT 1 – dot

+0

К сожалению, функция фильтра должна возвращать 'true' или' false', поэтому предупреждение не делает этого любое правосудие :(** И **, я также понял, что в моем коде есть опечатка, которую я исправлю в ближайшее время ... измените '=' на '==' в 'return'. Исправление опечатки должен устранить ошибку. – PeterKA

+0

вещь, когда я нашел подходящую ячейку, мне нужно определить строку, к которой принадлежит ячейка. Я могу скопировать данные из этой строки в другую таблицу. – dot

1

Мое предложение состоит в том, чтобы добавить идентификатор пользователя к элементам с помощью настраиваемого атрибута data-, чтобы вы могли легко получить к ним доступ с помощью селектора.

Например, обратите внимание на атрибут data-uid ниже:

<tr class="odd" role="row" id="row_89" data-uid="23819"><td>89</td><td>John Doe</td><td>23819</td><td>[email protected]</td></tr> 

С, что на месте, захватывая все соответствующие строки легко:

rows = $('#users tr[data-uid=' + uid + ']'); 
// ... 
+0

Мне нравится это решение. Это очень чисто.Но проблема в том, что я использую jQuery dataTables, и я не думаю, что могу указать пользовательский атрибут. – dot

+0

@dot Вы должны быть в состоянии это сделать. См. Https://datatables.net/examples/server_side/ids.html –

Смежные вопросы