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

Question

How can I get dynamically added rows id's and user entered data? I have created a dynamic table but I don't know how to get the values and dynamically generated id's. Can anyone please help me?

 $('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>

FIDDLE Here..

Answer 1

What do you mean by ids?? on what action you would want user data and ids of dynamically created rows.

Everything is there. You have jsrow enter code here class for each tr created. Fetch all tr and then fetch each input value as you have distinct class for each input.

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

Then iterate rows as per your need. i am writing directly lets say want to get all ids of row 2. Find all inputs under that row as below and then get id attribute.

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

You can get user input by referring to the column and row inside a table

     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);