Question

我是jQuery的新手，我被困住了。我正在动态地向jQuery表添加行。我想计算每一行（长*宽）=行总我想对每一列进行SUM并在表格的底部显示总计。

当用户在倒数第二个宽度输入中输入数字时，我还想动态添加新行。所以我不必点击按钮。

我已经想出了如何将行追加到表中但我无法使计算起作用。这是我的工作，还有fiddle here！

        <table class="table table-striped table-bordered table-condensed tab_logic turf" id="turf">
    <thead>
        <tr class="persist headings">
            <td colspan="3"><a class="toggle" tabindex="997" href="#">Turf Measurements</a></td>
            <td tabindex="998"><a class="toggle" href="#">Show / Hide</a></td>
        </tr>

        <tr class="headings">
            <td class="heading">Turf</td>
            <td class="heading">Length</td>
            <td class="heading">Width</td>
            <td  class="heading">Total</td>
        </tr>

        <tr class="grand-total">
            <td>Combined Totals</td>
            <td class="length-total"></td>
            <td class="width-total"></td>
            <td class="table-total" ></td>
        </tr>
    </thead>    
    <tfoot>
    <tr class="grand-total persist">           
            <td>Combined Totals</td>
            <td class="length-total"></td>
            <td class="width-total"></td>
            <td class="table-total" ></td>
        </tr>
    </tfoot>
    <tbody>
        <tr id='addr1' class="calculation visible">
            <td>1</td>
            <td class="length">
            <input type="text" class="length form-control input-md" value="" tabindex="1" /></td>
            <td class="width">
            <input type="text" class="width form-control input-md" type="text" value="" tabindex="2" /></td>
            <td class="row-total"><input type="text" class="row-total form-control" value="" readonly /></td>
        </tr>
        <tr class="calculation visible">
            <td>2</td>
            <td class="length">
            <input type="text" class="length form-control input-md" value="" tabindex="3" /></td>
            <td class="width">
            <input type="text" class="width form-control input-md" value="" tabindex="4" />
            </td>
            <td class="row-total"><input type="text" class="row-total form-control" value="" readonly />
            </td>
        </tr>
        <tr id='addr2' class="calculation visible">
    </tbody>
</table>
<div><a id="add_row" class="btn btn-default pull-left"><span class="glyphicon glyphicon-plus-sign"></span>  Add Row</a></div>
<div><a class="btn btn-default pull-left calculate" title="calculate row">Calculate</a></div>
<div><a  href="#" id='delete_row' class="pull-right btn btn-default"><span class="glyphicon glyphicon-minus-sign"></span>  Delete Row</a></div>

我尝试使用两段不同的代码来创建计算。

`$(document).ready(function(){
  var i=2;
  var ti=5;
 $("#add_row").click(function(){
  $('#addr'+i).html("<td>"+ (i+1) +"</td><td class='length'><input name='length"+i+"' type='text' class='length form-control input-md' value='' tabindex='"+(ti++)+"' /></td><td class='width'><input  name='width"+i+"' type='text' class='width form-control input-md' value='' tabindex='"+(ti++)+"' /></td><td class='row-total'><input type='text' class='row-total form-control' value='' readonly /></td>");

  $('#turf tr:last').after('<tr id="addr'+(i+1)+'" class="calculation visible"></tr>');
  i++;

}）; //结束add_row点击

 $("#delete_row").click(function(){
     if(i>1){
     $("#addr"+(i-1)).html('');
     i--;
     }
 }); //end delete_row click
});//end function`

是什么添加了行。我宁愿让它动态添加行而不需要点击按钮。

这就是我用来计算的东西。

$(document).ready(function () {
$('.calculation').change('click', function() {
    $('.turf').find('tbody').find('tr').each(function() {
        var l = $(this).find('input.length').val();
        var w = $(this).find('input.width').val();
        var dateTotal = (l * w);
        $(this).find('input.row-total').val(dateTotal);
    }); //END .each
    return false;
}); // END click 
});

我在小提琴中有另一段计算代码，但它被注释掉了，因为我迷失了，想要在两段不同的代码之间徘徊。

Answer 1

您需要将事件委托给容器，然后使用类指向动态添加的对象。另外，.on("click",...)（按钮，广播或复选框）或.on("change",...)（选择或文字字段）不是.change("click",...)

试试这个：

FIDDLE

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function recalc() {
    var lt=0,wt=0,tt=0;
    $("#turf").find('tr').each(function () {
        var l = $(this).find('input.length').val();
        var w = $(this).find('input.width').val();
        var dateTotal = (l * w);
        $(this).find('input.row-total').val(dateTotal?dateTotal:"");
        wt+=isNumber(w)?parseInt(w,10):0;
        lt+=isNumber(l)?parseInt(l,10):0;
        tt+=isNumber(dateTotal)?dateTotal:0;
    }); //END .each
    $("#length-grand-total").html(lt);
    $("#width-grand-total").html(wt);
    $("#table-grand-total").html(tt);
}

并添加

$("#turf").on("click", ".calculation", recalc);
$("#turf").on("keyup blur", ".form-control", recalc);
// add a row if a length is entered in the last row
$("#turf").on("keyup",".length:last", function() { 
    if (!$(this).data("done")) { // only do this once per field
      $(this).data("done",true);
      addRow();
    }
});
$("#delete_row").on("click",delRow);

加载

并将tfoot更改为

<tfoot>
    <tr class="grand-total persist">
        <td>Combined Totals</td>
        <td id="length-grand-total"></td>
        <td id="width-grand-total"></td>
        <td id="table-grand-total"></td>
    </tr>
</tfoot>

如何使用jQuery计算动态附加的表行

1 个答案: