How to Append Table row with specific Number in jquery

Question

I have a table and a class = Add that appends rows when clicked and a class = number.

My question is how can I append my rows with the number that stored in the span with class number?

Here is my snippet :

$(document).ready(function () {
  $(".add").click(function () {
    $('#mytable tr:last').after('<tr><td class="tr1" style="max-width: 10px;">Hello</td></tr>');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
You can add <span class="number"> 3</span> Hosts 
<table id="mytable" border="1">
   <tr>
      <td>1</td>
      <td>Title</td>
      <td>price</td>
   </tr>
   <tr>
      <td>1</td>
      <td>Title </td>
      <td>price</td>
    </tr>
</table>
<span  class="add" data-tooltip="You can add 3 host"><font color="red">add+</font></span>

Your question isn't clear. Can you show the expected HTML that is needs to be inserted? — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Dec 14, 2016 at 8:50
You mean add a maximum of 3 hosts? @RajaprabhuAravindasamy the HTML to be added is in the code — mplungjan
– mplungjan, Commented Dec 14, 2016 at 8:51

Sudharsan S · Accepted Answer · 2016-12-14 08:54:58Z

2

Try like

$(document).ready(function () {
  var i = 0;
  var num = parseInt($('.number').text(), 10); 
  $(".add").click(function () {
    if(i < num) {
        $('#mytable tr:last').after('<tr><td class="tr1" style="max-width: 10px;">Hello</td></tr>');
       i++;
      }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
Yo Can add <span class="number"> 3</span> Host 
<table id="mytable" border="1">
   <tr>
      <td>1</td>
      <td>Title</td>
      <td>price</td>
   </tr>
   <tr>
      <td>1</td>
      <td>Title </td>
      <td>price</td>
    </tr>
</table>
<span  class="add" data-tooltip="You can add 3 host"><font color="red">add+</font></span>

answered Dec 14, 2016 at 8:54

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

inaz Over a year ago

Thank you so much!

mplungjan · Accepted Answer · 2016-12-14 09:00:13Z

I assume you mean add a maximum of .number rows

Also jQuery 1.2.3 is silly old.

$(function () {
  var max = parseInt($(".number").text(),10)
  $(".add").on("click",function () {
    var nofRows = $(".added").length;
    if (nofRows<max) {
      $('#mytable tr:last').after('<tr class="added"><td class="tr1" style="max-width: 10px;">'+(nofRows+1)+'</td><td>'+prompt("Hots?","")+'</td></tr>');
    }  
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You can add <span class="number"> 3</span> Hosts 
<table id="mytable" border="1">
   <tr>
      <td>1</td>
      <td>Title</td>
      <td>price</td>
   </tr>
   <tr>
      <td>1</td>
      <td>Title </td>
      <td>price</td>
    </tr>
</table>
<span  class="add" data-tooltip="You can add 3 host"><font color="red">add+</font></span>

Undecided Dev · Accepted Answer · 2016-12-14 08:52:49Z

Try this one. Im appending row and also column depends on how many columns and row you want.

<label for="rows">
  Number of rows
</label>
<input type="number" id="rows">
<label for="column">
  Number of column
</label>
<input type="number" id="column">
<button id="createtable">Create table</button>

<div id="table">

</div>


$('#createtable').on('click', function() {
    $('#table').html("");
  var rows = $('#rows').val(); //here's your number of rows and columns
  var cols = $('#column').val();
  var table = $('<table><tbody>');
  for (var r = 0; r < rows; r++) {
    var tr = $('<tr>');
    for (var c = 0; c < cols; c++)
      $('<td>value</td>').appendTo(tr); //fill in your cells with something meaningful here
    tr.appendTo(table);
  }

  table.appendTo($('#table'));

})

TERMIN · Accepted Answer · 2016-12-14 09:02:58Z

I am not sure that is what you meant....

$(document).ready(function () {
  $(".add").click(function () {
    var num = $(".number:first").text();
    $('#mytable tr:last').after('<tr><td class="tr1" style="max-width: 10px;">'+num +'</td><td>Hello</td><td>'+num +'</td></tr>');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
You can add <span class="number"> 3</span> Hosts 
<table id="mytable" border="1">
   <tr>
      <td>1</td>
      <td>Title</td>
      <td>price</td>
   </tr>
   <tr>
      <td>1</td>
      <td>Title </td>
      <td>price</td>
    </tr>
</table>
<span  class="add" data-tooltip="You can add 3 host"><font color="red">add+</font></span>

SURJEET SINGH Bisht · Accepted Answer · 2016-12-14 08:57:14Z

-1

     $(".add").click(function () {
     var NoOfRows=$('.number').html();
     for (var i = 0; i < NoOfRows; i++) {
           $('#mytable').append('<tr><td class="tr1" style="max-width: 10px;">Hello</td></tr>')
    }

   });

answered Dec 14, 2016 at 8:57

SURJEET SINGH Bisht

88110 silver badges16 bronze badges

1 Comment

kayess Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations!

Collectives™ on Stack Overflow

How to Append Table row with specific Number in jquery

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related