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> 

Answer 1

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> 

Answer 2

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> 

Answer 3

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

})

Answer 4

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> 

Answer 5

     $(".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>')
    }

   });