追加する方法jqueryの特定の番号を持つ表の行

Question

私はテーブルとクラス=クリックしてクリックしたときに行を追加し、クラス=番号を追加するクラスがあります。

私の質問は、クラス番号でスパンに格納されている番号の行を追加するにはどうすればよいですか？

$(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

私はそれはあなたが何を意味するのかであることを確認していない

$(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

はこの1つを試してみてください：

は、ここに私のスニペットです。行を追加すると、行はまた、いくつの列と行が必要かによって決まります。私はあなたがまた.NUMBER行

の最大を追加意味想定し

<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 3

のjQuery 1.2.3は愚かな古いです。

$(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 4

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

    }); 

Answer 5

のように試してみてください....

$(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>