Question

在下表中，从<td>2</td>开始到最后一切都是来自PHP的动态值。

因此每行包含selectbox和动态文本框。如果任何值被更改，我应该能够获得行号，例如“{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

我建议你不要将事件绑定到每个输入，而是在table元素上监听事件，并利用JavaScript中的事件冒泡机制。

这可以使用delegate()而不是click()来实现。这种方法效率更高，特别是在处理潜在的大量元素时，例如在这种情况下。

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

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

您可以通过检索tr元素的rowIndex属性来获取已更改行的行索引：

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

    changedRows.push(tr);
});

我们如何找到表中已更改的行

1 个答案: