0

I am new to JQuery, Adding dynamic row to my html table with following code

function addRow() {
  var root = document.getElementById('mytab').getElementsByTagName('tbody')[0];
  var rows = root.getElementsByTagName('tr');
  var clone = cloneEl(rows[rows.length - 1]);
  cleanUpInputs(clone);
  root.appendChild(clone);
}
function addColumn() {
  var rows = document.getElementById('mytab').getElementsByTagName('tr'), i = 0, r, c, clone;
    while (r = rows[i++]) {
      c = r.getElementsByTagName('td');
      clone = cloneEl(c[c.length - 1]);
      cleanUpInputs(clone);
      c[0].parentNode.appendChild(clone);
    }
}
function cloneEl(el) {
  var clo = el.cloneNode(true);
  return clo;
}

function cleanUpInputs(obj) {
  for (var i = 0; n = obj.childNodes[i]; ++i) {
    if (n.childNodes && n.tagName != 'INPUT') {
      cleanUpInputs(n);
    } else if (n.tagName == 'INPUT' && n.type == 'text') {
      n.value = '';
    }
  }  
}

My html looks like this

<table id="mytab" class="table table-bordered payment_table">
                                    <thead class="bg-header">
                                        <tr>
                                            <th colspan="4">Bill Details</th>
                                        </tr>
                                    </thead>
                                    <tbody class="form-tbody">
                                        <tr>
                                            <th class="text-center">Quantity</th>
                                            <th class="text-center">Rate/Item</th>
                                            <th class="text-center">Total</th>  
                                            <th class="text-center">Description</th>                                            
                                        </tr>
                                        <tr>
                                            <td><input type="text" id="quantity" name="quantity" class="form-control"></td>
                                            <td><input type="text" id="rate" name="rate" class="form-control"></td>
                                            <td><input type="text" id="total" name="total" class="form-control"></td>
                                            <td><input type="text" id="desc" name="desc" class="form-control"></td>
                                        </tr>
                                    </tbody>
                                    <td><input type="button" class="btn btn-primary" value="Add" onclick="addRow()"></td>
                                </table>

i am doing quantity*rate/item=total by using jquery following line of code

$(document).ready(function(){
        $(document).on('keyup','#rate',function(){
            var rate = $("#rate").val();
            var quantity = $("#quantity").val();
            var total = rate*quantity;
            $('#total').val(total);
        });
    });

it works fine for first row but do not works for added rows. I have tried "+" with my id but still it did not work. Also input fields are created with name when added dynamically.How to handle this to save data at Server end. Need Help!!!

Danish
  • 3
  • 2
  • Does this answer your question? [Event handler not working on dynamic content](https://stackoverflow.com/questions/15090942/event-handler-not-working-on-dynamic-content) – cloned Apr 17 '20 at 07:01
  • i added document.body but it did not work. In my case input fields are being created with same name – Danish Apr 17 '20 at 07:07

1 Answers1

0

id elements must be unique, when you clones a tr you are duplicating its internal structure, so it would be necessary to make the definition of the id more dynamic.

One solution would be to concatenate the id value with a variable, and at the moment of cloning the tr increase the value of that variable.

Something like this: $("#quantity" + var++) in each "clone action".

I hope this helps.

TonyB
  • 31
  • 4