CODEWITHSUNDEEP
javascriptjquery
Diamond
Diamond

Reputation: 117

how to add a new row to the table using jquery,if table have already more than one row

i have code for adding row to the table when click ADD button.Table first row is defined when i click add row button it just clone the above row and append it.Its all working fine.

When am fetch from database and display records on table.I am facing an error when if table have more than one row,assume table have two rows then am clicking ADD button it just clone all the above two rows.If table row have one row it is working fine,getting issues when more than one row

Here is my code

            var id = 2; //assume table total length 2
            $("table.itemsdetails button.add_dup").click(function() {
            id++;
            var master = $(this).parents("table.itemsdetails");

            // Get a new row based on the prototype row
            var prot = master.find(".item-row").clone();
            prot.find(".itemname").val("");
            prot.attr("class", id + " item");
            prot.attr("id", id + "itemslno");
            prot.addClass("itemr");                 
            prot.find(".id").attr("value", id);
            master.find("tbody").append(prot);
            prot.append('<td><button class="remove">X</button></td>');
            });

When records fetch from database to the table row looks like 

<table id="itemsdetails" class="itemsdetails">
   <thead>
      <tr>
         <th>Sl No</th>
         <th>Items</th>
      </tr>
   </thead>
   <tbody>
      <tr id="1itemslno" class="item-row itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="16"><input id="slno" invoiceitems_id="16" name="slno" class="form-control id" value="1" readonly=""></td>
         <td class="description"> <input invoiceitems_id="16" id="itemname" name="itemname" class="form-control itemname info" value="ghvg  " readonly="readonly"> </td>
      </tr>
      <tr id="2itemslno" class="item-row itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="17"><input id="slno" invoiceitems_id="17" name="slno" class="form-control id" value="2" readonly=""></td>
         <td class="description"> <input invoiceitems_id="17" id="itemname" name="itemname" class="form-control itemname info" value="jhghjgj" readonly="readonly"> </td>
      </tr>
   </tbody>
   <tfoot>
      <tr id="hiderow_duplicate" style="display:block">
         <th><button style="width:73px;" class="add_dup">ADD ROW-D</button></th>
      </tr>
   </tfoot>
</table>

When am click ADD button html should looks like 

<table id="itemsdetails" class="itemsdetails">
   <thead>
      <tr>
         <th>Sl No</th>
         <th>Items</th>         
      </tr>
   </thead>
   <tbody>
      <tr id="1itemslno" class="item-row itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="16"><input id="slno" invoiceitems_id="16" name="slno" class="form-control id" value="1" readonly=""></td>
         <td class="description"> <input invoiceitems_id="16" id="itemname" name="itemname" class="form-control itemname info" value="ghvg  "> </td>
      </tr>
      <tr id="2itemslno" class="item-row itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="17"><input id="slno" invoiceitems_id="17" name="slno" class="form-control id" value="2" readonly=""></td>
         <td class="description"> <input invoiceitems_id="17" id="itemname" name="itemname" class="form-control itemname info" value="jhghjgj"> </td>
      </tr>
      <tr id="3itemslno" class="3 item itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="16"><input id="slno" invoiceitems_id="16" name="slno" class="form-control id" value="3" readonly=""></td>
         <td class="description"> <input invoiceitems_id="16" id="itemname" name="itemname" class="form-control itemname info" value="ghvg  "> </td>
         <td><button class="remove">X</button></td>
      </tr>
      <tr id="3itemslno" class="3 item itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="17"><input id="slno" invoiceitems_id="17" name="slno" class="form-control id" value="3" readonly=""></td>
         <td class="description"> <input invoiceitems_id="17" id="itemname" name="itemname" class="form-control itemname info" value="jhghjgj"> </td>
         <td><button class="remove">X</button></td>
      </tr>
   </tbody>
   <tfoot>
      <tr id="hiderow_duplicate" style="display: block;">
         <th><button style="width:73px;" class="add_dup">ADD ROW-D</button></th>
      </tr>
   </tfoot>
</table>

issue looks like

Can anyone plz help me ?

Upvotes: 1

Views: 201

Answers (2)

Jonathan Gagne
Jonathan Gagne

Reputation: 4379

Use append() such as below and target the tag name TBODY. See the snippet below.

In the comments you added the requirement to append with iteration.

i want to show the slno ie;3,4,5 etc.. dynamically

At this point the solution with incremental ++ was the best.

And then, you added the requirement that you would prefer with the number of row in the table.

Sir u know how to take total table row length before append the table row?then i need to set it into myCounter value dynamically

At this point the jQuery selector combined with .length would be the best solution. See below the code.

So here we go my friend...

$(".add_dup")[0].onclick = function(){
  var row = $("tbody tr").length + 1;
  $( "tbody" ).append( '<tr id="' + row + 'itemslno" class="item-row itemr"><td><input class="invoiceitemsID" id="invoiceitemsID' + row + '" type="hidden" value="16"><input id="slno' + row + '" invoiceitems_id="16" name="slno[]" class="form-control id" value="' + row + '" readonly=""></td><td class="description"> <input invoiceitems_id="16" id="itemname" name="itemname" class="form-control itemname info" value="ghvg  "> </td></tr></tbody>' );
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="itemsdetails" class="itemsdetails">
   <thead>
      <tr>
         <th>Sl No</th>
         <th>Items</th>         
      </tr>
   </thead>
   <tbody>
      <tr id="1itemslno" class="item-row itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID1" type="hidden" value="16"><input id="slno1" invoiceitems_id="16" name="slno[]" class="form-control id" value="1" readonly=""></td>
         <td class="description"> <input invoiceitems_id="16" id="itemname" name="itemname" class="form-control itemname info" value="ghvg  "> </td>
      </tr>
   </tbody>
   <tfoot>
      <tr id="hiderow_duplicate" style="display: block;">
         <th><button style="width:73px;" class="add_dup">ADD ROW-D</button></th>
      </tr>
   </tfoot>
</table>

Upvotes: 3

Pedro Serpa
Pedro Serpa

Reputation: 161

The problem is that you're duplicating - or cloning - all the rows in the table instead of adding just one.

var prot = master.find(".item-row").clone();

Where you should clone the last one 

var prot = master.find(".item-row:last-child").clone();

But since you're messing with the DOM and adding new stuff, you would have to reinstantiate the ADD ROW-D click event after the append, so I say that you should starting splitting your logic into several functions.

Upvotes: 0

Related Questions