[英]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. 我有一个表和一个class = Add,它在单击时会追加行,并且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>
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>
I assume you mean add a maximum of .number rows 我假设您的意思是最多添加.number行
Also jQuery 1.2.3 is silly old. 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>
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'));
})
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>
$(".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>')
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.