How do we find the row in the table which was changed

Question

In the below table starting from <td>2</td> to the last everything is dynamic values from PHP.

So each row contains the selectbox and the textbox which are dynamic. If any of the values are changed I should be able to get the row number such as "2" or "3" or "4" or so on which was in td how do i get that how do I create an array with these values separated by ','(do we need use join).

 $("#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:I wasnot able to post the comments

Answer 1

Rather than binding an event to every input, I would recommend you instead listen for the event on the table element, and take advantage of the event bubbling mechanism in JavaScript.

This can be achieved using delegate() rather than click(). This approach is a lot more efficient, especially when dealing with a potentially large number of elements like in this situation.

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

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

You can get the row index of the changed row by retrieving the rowIndex attribute of the tr element:

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

    changedRows.push(tr);
});