Question

我尝试使用动态单元格创建tbale，并在每行之后执行计算。但是，我似乎无法获得表格中每个rw的元素总数，它只会让人感到震惊，或者出现'未定义'。

创建表格的代码：

$(document).ready(function () {

    $(document).on('click', '.add', function () {
        var html = '';
        html += '<tr onclick="calc(this)">';
        html += '<td><input type="text" name="item_name[]" oninput="calc()" class="form-control item_name" /></td>';
        html += '<td><input type="text" name="item_quantity[]" class="form-control item_quantity" /></td>';
        html += '<td><input type="text" name="item_unit[]" class="form-control item_unit" /></td>';
        //NEW ONES!!!!!!!!!!!!!!!
        html += '<td><select name="item_glass[]" class="form-control item_glass"><option value="">Select Glass Type</option><?php echo fill_unit_select_box($connect); ?></select></td>';
        html += '<td><select name="item_splash[]" class="form-control item_splash"><option value="">Select Splash</option><?php echo fill_unit_select_box3($connect); ?></select></td>';

        html += '<td><input type="text" name="item_HQuan[]" class="form-control item_HQuan" /></td>';
        html += '<td><select name="item_HDiam[]" class="form-control item_HDiam"><option value="">Select Hole Diameter</option><?php echo fill_unit_select_box2($connect); ?></select></td>';
        html += '<td><input type="text" name="item_CQuan[]" class="form-control item_CQuan" /></td>';

        //Total
        html += '<td><input type="text" name="item_Total[]" id="item_total[]" class="form-control item_total" disabled/></td>';


        html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove">Delete Row<span class="glyphicon glyphicon-minus"></span></button></td></tr>';
        $('#item_table').append(html);
    });

代码我试过测试get元素并为每一行更改它：

function calc(x){

  var i = x.rowIndex;
  document.getElementById("item_total[]").value = "test";

}

function calc(x){

  var i = x.rowIndex;
  document.getElementById("item_total[]")[i].value = "test";

}

function calc(x){

  var i = x.rowIndex;
  document.getElementByName("item_total")[i].value = "test";

}

这些都不起作用，我不知道如何解决这个问题？

Answer 1

我建议您改用querySelector()。有了它，您可以使用CSS选择器找到元素，如下所示，使用属性选择器：

document.querySelector('[name="item_name[]"]')

根据评论更新

如果您有多个input具有相同名称，则可以使用querySelectorAll()并循环显示结果，例如

var els = document.querySelectorAll('[name="item_name[]"]');
for (var i = 0; i < els.length ; i++) {

   // do something with e.g. each value
   var val = parseFloat(els[i].value);   // or parseInt(), so it becomes a number

}

请注意，内部括号可能需要像这样转义才能跨浏览器正常工作：

'[name="item_name\\[\\]"]'

注意：

由于getElementById()不是item_name[]，您的id无法正常工作。

你的getElementByName()因拼写错误而无法工作。应为getElementsByName()， Elements

中有s

每行的动态单元计算

1 个答案: