CODEWITHSUNDEEP
javascriptjqueryhtmlcss
inaz
inaz

Reputation: 1775

How to Append Table row with specific Number in jquery

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>

Upvotes: 1

Views: 1838

Answers (5)

TERMIN
TERMIN

Reputation: 862

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>

Upvotes: 0

mplungjan
mplungjan

Reputation: 177796

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>

Upvotes: 1

SURJEET SINGH Bisht
SURJEET SINGH Bisht

Reputation: 881

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

   });

Upvotes: -1

Sudharsan S
Sudharsan S

Reputation: 15393

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>

Upvotes: 2

Undecided Dev
Undecided Dev

Reputation: 830

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

})

Upvotes: 0

Related Questions