Как мы находим строку в таблице, которая была изменена

Question

В приведенной ниже таблице, начиная с <td>2</td> до последнего, все являются динамическими значениями из PHP.

Таким образом, каждая строка содержит поле выбора и текстовое поле, которые являются динамическими. Если любое из значений будет изменено, я смогу получить номер строки, такой как «2», «3» или «4» или около того, который был в td эти значения разделены ',' (нужно ли использовать соединение).

 $("#btn_refAddNew2").click(function(){
     var totrows= $('#refTbl').attr('rows').length;
     for(i=2; i<totrows; i++){
     $(".MyClass").bind("change",function(){

     });

 }

HTML:

  <table id="myTable">
    <tr> 
     <th> Column1</th>
     <th>  Column2</th>
    </tr>


  <table id="refTbl" cellpadding="0" cellspacing="0" border=1 cellpadding=1 cellspacing=1 class="formTable">
    <tr> 
     <th>  </th>
     <th> Reference Code </th>
     <th> Reference Value </th>
     <th> </th>
    </tr>
    <tr>
        <td valign="top">1 </td>
     <td valign="top">     
      <select name="select1"  id="selct1" class="test" tabindex="" >
      <option></option>
      </select>
     </td>
     <td > 
      <textarea valign="top" cols="24" name="referencevalue1" id="referencevalue1"></textarea>
     </td>
    </tr> 
    <tr> 
     <td colspan="4"> 
      <input name="" type="submit" class="" id="add1" value="add" >
     </td>
    </tr>
     <tr>
  <td>2</td>
  <td> <select name='se_refcode2' class='MyClass' id='referencecode2' tabindex='2>
  <option value="dynamic">DYNAMIC Value</option>
  <option value="dynamic">DYNAMIC Value</option>
  <option value="dynamic">DYNAMIC Value</option>
  </select></td> 
  <td> <input name='tx_references2' id='referencevalue2' type='text' value='9' class='MyClass'  tabindex='2' size='20' maxlength='20'  ></td>
  </tr>
  <tr class="rowtext" height="10" onmouseout="this.className ='rowtext';" onmouseover="this.className = 'highlightrowtext';">
  <td>3</td>
  <td> <select name='se_refcode2' class='MyClass' id='referencecode2' tabindex='2>
  <option value="dynamic">DYNAMIC Value</option>
  <option value="dynamic">DYNAMIC Value</option>
  <option value="dynamic">DYNAMIC Value</option>
  </select></td> 
  <td> <input name='tx_references3' id='referencevalue3' type='text' value='8' class='MyClass'  tabindex='3' size='20' maxlength='20'  ></td>
  <td>4</td>
  <td> <select name='se_refcode4' class='MyClass' id='referencecode4' tabindex='4>
  <td> <input name='btn_refDelete' type='button' value='Delete' class='bttn_med' id='btn_refDelete'  data-value ='4' ></td></tr>
  <td> <input name='tx_references3' id='referencevalue3' type='text' value='8' class='MyClass'  tabindex='3' size='20' maxlength='20'  ></td>

@ patrickdw: я не смог опубликовать комментарии

Answer 1

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

Этого можно добиться с помощью delegate() вместо click().Этот подход намного более эффективен, особенно при работе с потенциально большим количеством элементов, как в этой ситуации.

$(document).ready(function () {
    var changedRows = [];

    $('#yourTable').delegate('input,select', 'change', function () {
        var self = $(this);
        changedRows.push(self.closest('tr'));
    });
});

Вы можете получить индекс строки измененной строки, получив атрибут rowIndex tr элемент:

$('#yourTable').delegate('input,select', 'change', function () {
    var self = $(this);
    var tr = self.closest('tr');
    var index = tr.attr('rowIndex');

    changedRows.push(tr);
});