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

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

我已尝试添加此功能。但是它没有用完。

 $('.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），就像在正常事件处理程序中事件绑定到每一行一样。 / p>

修改

您添加了许多class属性，这些属性不是添加多个类所必需的。您可以在同一属性中添加多个类，例如class="class1 class2 class3"。

将类unitprice添加到与标题单价相同的列中的输入元素。标题数量下的班级qty和“行总计”下的linetotal相同。现在，当您想要从单位价格和数量计算行总计时，您必须将onchange事件添加到具有类unitprice和qty的两个输入元素。所以上面的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);
    }
  }

});