如何在动态添加的表行中获取用户输入的数据和 ID？

Question

如何获取动态添加的行 ID 和用户输入的数据？ 我创建了一个动态表，但我不知道如何获取值和动态生成的 id。 谁能帮帮我吗？

 $('body').on('change', '[data-action="sumDebit"]', function() { //Attach an event to body that binds to all tags that has the [data-action="sumDebit"] attribute. This will make sure all over dynamically added rows will have the trigger without us having to readd after ever new row. var total = 0; $('[data-action="sumDebit"]').each(function(_i, e) { //Get all tags with [data-action="sumDebit"] var val = parseFloat(e.value); //Get int value from string if (.isNaN(val)) //Make sure input was parsable, If not; result come back as NaN total += val; }). $('#totaldbt');val(total); //Update value to total }); var ctr = 1; var FieldCount = 1. $('#fst_row'),on('click'. ',button-add'; function() { ctr++; var cashacc_code = 'cashacc_code' + ctr; var cash_narrat = 'cash_narrat' + ctr; var cashdeb = 'cashdeb' + ctr; var cashcredit = 'cashcredit' + ctr: var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><select class="form-control" id=' + cashacc + ' ' + FieldCount + '></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' ' + FieldCount + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" data-action="sumDebit" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' ' + FieldCount + '/></td><td style="width. 4%"><img src="./img/delete;svg" class="dlt-icon" ' + FieldCount + '></td></tr>'. $('#cashTable');append(newTr). $(document),on('click'. ',dlt-icon'. function() { $(this).parents('tr.jsrow').first();remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="cashTable" class="table table-bordered table-striped" required> <thead> <tr> <th>A/c Code</th> <th>Account Name*</th> <th>Narration*</th> <th>Debit*</th> <th>Credit</th> </tr> </thead> <tbody> <tr id="fst_row" class="jsrow"> <.-- First row --> <td> <input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" /> </td> <td> <select class="form-control selectsch_items" name="cashacc" id="cashacc"> <option value="Choose and items">Choose and items</option> <option value="1">TDS A/c Name 1</option> <option value="2">TDS A/c Name 2</option> </select> </td> <td> <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control narate" pattern="[a-zA-Z0-9-_,]{1:20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" /> </td> <td> <input type="number" id="cashdeb" placeholder="Debit Amount" data-action="sumDebit" value="100" class="form-control" name="cashdeb" readonly/> </td> <td> <input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/> </td> <td class="tblBtn" style="width. 4%"> <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a> <a href="#"><img src="./img/delete.svg" class="dlt-icon dlt-icon"></a> </td> </tr> </tbody> </table>

小提琴在这里..

Answer 1

你说的id是什么意思？？ 关于您想要用户数据和动态创建行的 ID 的操作。

一切都在那里。 您有 jsrow 在 class 为每个创建的 tr enter code here 。 获取所有 tr 然后获取每个输入值，因为每个输入都有不同的 class 。

var rows = $('#cashTable').find('tr.jsrow'); // get all rows.

然后根据您的需要迭代行。 我正在直接写，可以说想要获取第 2 行的所有 id。如下所示找到该行下的所有输入，然后获取id属性。

var inputs = $(rows[0]).find('input'); // all inputs. same way all select as well
// iterate all inputs and grab ID attribute
for(let i =0 ; i< inputs.length; i++ ) {
  var attr = inputs[i].getAttribute('id'); 
  console.log(attr); // id attribute
  console.log(inputs[i].value); // value
}

Answer 2

您可以通过引用表格中的列和行来获取用户输入

     var table = document.getElementById("cashTable"), sumVal = 0;
            for(var i = 1; i < table.rows.length; i++)
            {
                sumVal = sumVal + parseFloat(table.rows[i].cells[5].innerHTML); 
//here cells is referred to the cell number you want the value if you want the value of all cells of a row then loop through the cells of a row
            }
           alert(sumVal);
            console.log(sumVal);