如何为表中的动态行检测列中的值更改？

Question

当行的数量和单价发生变化时，我试图找到一个动态更改行总列的解决方案。如何检测每一行的更改--包括克隆行之后的更改。目前这是我的html代码。我希望使用jquery动态地更改值。我试着做了很长一段时间的研究，但我还是搞不清楚。

这里有一张图片来解释我指的是什么：http://postimg.org/image/j9cb4r5rh/

<table class="table table-bordered" id="mytable">
    <thead>
        <tr>
            <th></th>
            <th class="col-sm-3">Item</th>
            <th class="col-sm-2">Item Name</th>
            <th class="col-sm-3">Description</th>
            <th class="col-sm-2">Unit Price</th>
            <th class="col-sm-2">Qty</th>
            <th class="col-sm-3">Line Total</th>
            <th class="col-sm-2">Stock Level</th>
        </tr>
    </thead>

    <tbody>
        <tr id='tableRow1' class='rows'>
            <td><input type="checkbox" class='chkbox'/></td>  
            <td><input class="form-control"  disabled class="data_input" disabled/></td>
            <td> <input type="text" class="form-control" class='inputPartNo' disabled></td>
            <td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
            <td> <input type="text" class="form-control" ></td>
            <td> <input   class="form-control" ></td>
            <td> <input  class="form-control" ></td>

            <td></td>
            <!--<td>  <span class="glyphicon glyphicon-ok" aria-hidden="true" style="margin:9px 0 0 12px;"></span></td>-->
        </tr>

            <tr id='tableRow2' class='rows'>
                <td><input type="checkbox" class='chkbox'/></td>
            <td><input class="form-control"  disabled class="data_input" disabled/></td>
            <td> <input type="text" class="form-control" class='inputPartNo'disabled ></td>
            <td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
            <td> <input type="text"  class="form-control" ></td>
            <td> <input type="text" class="form-control" ></td>
            <td> <input  class="form-control" ></td>
            <td></td>

               <!--                <td>  <span class="glyphicon glyphicon-remove" aria-hidden="false" style="margin:9px 0 0 12px;"></span></td>-->
        </tr>

         <tr id='tableRow2' class='rows'>
            <td><input type="checkbox" class='chkbox'/></td>
            <td><input class="form-control"  disabled class="data_input" disabled/></td>
            <td> <input type="text" class="form-control" class='inputPartNo' disabled></td>
            <td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
            <td> <input type="text"  class="form-control" ></td>
            <td> <input type="text" class="form-control" ></td>
            <td> <input  class="form-control" ></td>
            <td></td>

                <!--                <td>  <span class="glyphicon glyphicon-remove" aria-hidden="false" style="margin:9px 0 0 12px;"></span></td>-->
        </tr>

         <tr id='tableRow2' class='rows'>
            <td><input type="checkbox" class='chkbox'/></td>
            <td>                  
             <input class="form-control"  disabled class="data_input" disabled/>
            </td>
            <td> <input type="text" class="form-control" class='inputPartNo' disabled></td>
            <td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
            <td> <input type="text"  class="form-control" ></td>
            <td> <input type="text" class="form-control" ></td>
            <td> <input  class="form-control" ></td>
            <td></td>

    <!--                <td>  <span class="glyphicon glyphicon-remove" aria-hidden="false" style="margin:9px 0 0 12px;"></span></td>-->
        </tr>

         <tr id='tableRow2' class='rows'>
            <td><input type="checkbox" class='chkbox' /></td>
            <td>
                <input class="form-control"  disabled class="data_input" disabled/>
            </td>
            <td> <input  class="form-control" class='inputPartNo'class="data_input" disabled ></td>
            <td><textarea rows="4" cols="40" class="form-control" disabled class="data_input"/></textarea></td>
            <td> <input  class="form-control" class="data_input" ></td>
            <td> <input  class="form-control" ></td>
            <td> <input  class="form-control" ></td>
            <td></td>

 <!--                <td>  <span class="glyphicon glyphicon-remove" aria-hidden="false" style="margin:9px 0 0 12px;"></span></td>-->
        </tr>



    </tbody>

</table>

以下是我按要求编写的jquery代码：

//Insert new rows after the last row in the table
    $("#add").click(function() 
    {
        var numRows = $('#getnumRows').val();
        alert(numRows);
        alert('triggered!');
        var selectlastRow=$('#mytable tbody>tr').eq(rowIndex);
        for (i=0; i < numRows; i++) 
            {                               
              $(selectlastRow).clone(true,true).insertAfter(selectlastRow);
              $(selectlastRow).addClass('rows');
              selectlastRow.find('td').children('select,input,textarea,input').val('');

            }
    });//end click tag

我试着把这个添加到每个function.However上，但都没有成功。

 $('.inputJobsheet>#mytable>tbody>.rows').each(function(index)){
alert(index);
});

这是我更新的密码：

$('#mytable>tbody>tr>td').on('change', '.unitprice, .qty', function() {
  var $elem = event.target; //to get the element which triggered this event
  alert($elem);
  var $lineTotalElem = $elem.parent.find('.linetotal'); //get linetotal input val
  var qty = $elem.parent.find('.qty').val(); 
  var unitprice = $elem.parent.find('.unitprice').val() 
  if(qty !== undefined && unitprice !== undefined) {
  var total = qty * unitprice;
  if(total !== undefined || total > 0) {
   $lineTotalElem.val(total);
     }

       }
        });


<table class="table table-bordered" id="mytable">
    <thead>
        <tr>
            <th></th>
            <th class="col-sm-3">Item</th>
            <th class="col-sm-2">Item Name</th>
            <th class="col-sm-3">Description</th>
            <th class="col-sm-2">Unit Price</th>
            <th class="col-sm-2">Qty</th>
            <th class="col-sm-3">Line Total</th>
            <th class="col-sm-2">Stock Level</th>
        </tr>
    </thead>

    <tbody>
        <tr id='tableRow1' class='rows'>
            <td><input type="checkbox" class='chkbox'/></td>  
            <td><input class="form-control"  disabled  disabled/></td>
            <td> <input type="text" class="form-control"  disabled></td>
            <td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
            <td> <input type="text" class="form-control unitprice" ></td>
            <td> <input  class="form-control qty" ></td>

            <td> <input  class="form-control linetotal" ></td>
            <td></td>
            <!--<td>  <span class="glyphicon glyphicon-ok" aria-hidden="true" style="margin:9px 0 0 12px;"></span></td>-->
        </tr>

            <tr id='tableRow2' class='rows'>
                <td><input type="checkbox" class='chkbox'/></td>
            <td><input class="form-control"  disabled  disabled/></td>
            <td> <input type="text" class="form-control" disabled ></td>
            <td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
            <td> <input type="text"  class="form-control unitprice" ></td>
            <td> <input type="text" class="form-control qty" ></td>

            <td> <input  class="form-control linetotal" ></td>
            <td></td>


        </tr>

         <tr id='tableRow2' class='rows'>
            <td><input type="checkbox" class='chkbox'/></td>
            <td><input class="form-control"   disabled/></td>
            <td> <input type="text" class="form-control" disabled></td>
            <td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
            <td> <input type="text"  class="form-control unitprice" ></td>
            <td> <input type="text" class="form-control qty" ></td>

            <td> <input  class="form-control linetotal" ></td>
            <td></td>


        </tr>

         <tr id='tableRow2' class='rows'>
            <td><input type="checkbox" class='chkbox'/></td>
            <td>                  
             <input class="form-control"  disabled disabled/>
            </td>
            <td> <input type="text" class="form-control"  disabled></td>
            <td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
            <td> <input type="text"  class="form-control unitprice" ></td>
            <td> <input type="text" class="form-control qty" ></td>

            <td> <input  class="form-control linetotal" ></td>
            <td></td>

        </tr>

         <tr id='tableRow2' class='rows'>
            <td><input type="checkbox" class='chkbox' /></td>
            <td>
                <input class="form-control"  disabled  disabled/>
            </td>
            <td> <input  class="form-control" disabled ></td>
            <td><textarea rows="4" cols="40" class="form-control" disabled/></textarea></td>
            <td> <input  class="form-control unitprice"   ></td>
            <td> <input  class="form-control qty" ></td>

            <td> <input  class="form-control linetotal" ></td>
            <td></td>


        </tr>



    </tbody>

</table>

Answer 1

尝试将onchange事件附加到行元素，如

$('#mytable').on('change', '.unitprice, .qty', function() {
  /* do your calculation here */
});

这也会将onchange事件附加到当前和未来的元素。它被称为委托事件，其优点是它们可以处理以后添加到文档中的子元素中的事件。另外，事件-委托方法只将事件处理程序附加到一个元素tbody，而事件只需要向上抛出一个级别(从单击的tr到tbody)，就像在普通事件处理程序中将事件绑定到每一行一样。

编辑

您已经添加了许多class属性，这对于添加多个类来说是不必要的。您可以在相同属性(如class="class1 class2 class3" )中添加多个类。

将类unitprice添加到与标题单元价格位于同一列中的输入元素中。标题为Qty的qty类和行总数下的linetotal类相同。现在，当您想要从Unit和Qty中计算Line时，您必须使用类unitprice和qty向这两个输入元素添加onchange事件。所以上面的onchange事件处理程序可以用作，

$('#mytable').on('change', '.unitprice, .qty', function(event) {
  var $elem = event.target; //to get the element which triggered this event
  var $lineTotalElem = $elem.parent.find('.linetotal'); //get linetotal input val
  var qty = $elem.parent.find('.qty').val(); 
  var unitprice = $elem.parent.find('.unitprice').val() 
  if(qty !== undefined && unitprice !== undefined) {
    var total = qty * unitprice;
    if(total !== undefined || total > 0) {
      $lineTotalElem.val(total);
    }
  }

});