Add element in the table

Question

I want when i click on the +add more button it should add the element same as in line no.1 also the S.No should incremented...and each row have remove option.

code in JSFIDDLE

<a href="" id="c" class="text-right">+add more</a>

<table class="table">
    <thead>
        <tr>
            <th>S.No.</th>
            <th>Name</th>
            <th>Dose</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td style="width:80%">
                <input id="1a" type="text" class="form-control">
            </td>
            <td style="width:80%">
                <input type="number" class="form-control">
            </td>
        <tr>
    </tbody>
</table>

Possible duplicate of [Add table row in jQuery](http://stackoverflow.com/questions/171027/add-table-row-in-jquery) — Bö macht Blau, Nov 02 '15 at 11:22

Alex Char · Answer 1 · 2015-11-02T11:23:40.960

You can use .clone() to copy your first tr:

$(".text-right").on("click", function() {
  var tr = $("table tr:eq(1)").clone(true);
  $(tr).find("td:first").text($("table tr").length - 1);
  $("table").append(tr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="c" class="text-right">+add more</a>
<table class="table">
  <thead>
    <tr>
      <th>S.No.</th>
      <th>Name</th>
      <th>Dose</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td style="width:80%">
        <input type="text" class="form-control">
      </td>
      <td style="width:80%">
        <input type="number" class="form-control">
      </td>
      <tr>
  </tbody>

</table>

I remove id from input cause id must be unique. Also modify a bit the code to increase the numeric value of the td correct.

But the S.No. is not incrementing – Saurabh Della Ra'Man Nov 02 '15 at 11:21 — Saurabh Della Ra'Man, Nov 02 '15 at 11:21

Manwal · Answer 2 · 2015-11-02T11:23:24.993

2

Jquery clone() is for cloning DOM element and then you can append it. Consider code something like this:

$(function(){
    $("#c").click(function(e){
        e.preventDefault();
        $("table.table tbody tr:first").clone().appendTo("table.table tbody");
    });
})

DEMO

For increment of serial number:

$(function(){
    var counter = 1;
    $("#c").click(function(e){
        e.preventDefault();
        var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
        tr.find("td:eq(0)").text(++counter);
    });
})

See it in action

edited Nov 02 '15 at 11:23

answered Nov 02 '15 at 11:17

Manwal

23,450
12
63
93

But S.No is not incrementing – Saurabh Della Ra'Man Nov 02 '15 at 11:21
Updated answer @SaurabhDellaRa'Man for serial number increment take a look – Manwal Nov 02 '15 at 11:23
Perfect ...you are genius...but can i have remove option also to remove particular line – Saurabh Della Ra'Man Nov 02 '15 at 11:25
@SaurabhDellaRa'Man can't provide any else code because you haven't tried anything. Here i can only guide you. SO users can help you with your effort but can't write code. I have already informed you for this – Manwal Nov 02 '15 at 11:26
Thanks for your valuable comment...I will put on count...! – Saurabh Della Ra'Man Nov 02 '15 at 11:27

score 0 · Answer 3 · answered Nov 02 '15 at 12:11

try: html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a href="#" id="c" class="text-right">+add more</a>
    <table class="table">
      <thead>
        <tr>
          <th>S.No.</th>
          <th>Name</th>
          <th>Dose</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td style="width:80%">
            <input type="text" class="form-control">
          </td>
          <td style="width:80%">
            <input type="number" class="form-control"/></br><a class="rm" href="#">remove</a>
          </td>
          </tr>
      </tbody>

    </table>

js:

function updateNumber() {
   x = 0
        $('table.table tbody tr').each(function(i,v){

            $(this).find('td:eq(0)').text(x+1)
            x++;
        });
}
    $("#c").on('click',function(e){
        e.preventDefault();
        var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
        updateNumber();
        console.log($('table.table tbody tr'));
    });
    $('body').on("click",".rm", function(e) {
        e.preventDefault();
       $(this).parents('tr').remove();
        updateNumber();
     });

jsfiddle:https://jsfiddle.net/pjeruccb/3/

score 0 · Answer 4 · answered Nov 02 '15 at 12:19

Have a look at this:

$(".text-right").on("click", function() {
  var prevNo = parseInt($(".table tr:last td:first-child").text());
  var tr = $("table tr:eq(1)").clone(true);
  $("table").append(tr);
  $('.table tr:last-child td:first-child').html(prevNo + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="c" class="text-right">+add more</a>
<table class="table">
  <thead>
    <tr>
      <th>S.No.</th>
      <th>Name</th>
      <th>Dose</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td style="width:80%">
        <input type="text" class="form-control">
      </td>
      <td style="width:80%">
        <input type="number" class="form-control">
      </td>
    </tr>
  </tbody>

</table>

Add element in the table

4 Answers4