每行的动态单元计算

Question

我试图创建一个动态单元格的tbale，并在每一行后执行计算。但是，我似乎无法获得表格中每个rw的元素总数，它只会使这个firt或者出现'undefined'。

创建表的代码：

$(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()与元素中的s