jQuery Jquery动态表创建？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17440239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Dynamic table create?
提问by user2424382
How to create Dynamic table using JQuery I created with .append but problem is when i am clicking on again so create anther table but i want add in to a same table so how can i do that please help me.
如何使用我用 .append 创建的 JQuery 创建动态表，但问题是当我再次单击时创建另一个表，但我想添加到同一个表中，所以我该怎么做，请帮助我。
$(function () {
$("#addProduct").click(function () {
var table = $('<table></table>').addClass('foo');
for (i = 0; i < 10; i++) {
var row = $('<tr></tr>');
for (i = 0; i < 10; i++) {
var row1 = $('<td></td>').addClass('bar').text('result ' + i);
table.append(row);
row.append(row1);
}
}
$('#someContainer').append(table);
});
});
This is HTML
这是 HTML
<button id="addProduct">Add Product</button>
<div id="someContainer"></div>
回答by Olrac
Try my answer
试试我的回答
$(function () {
$("#addProduct").click(function () {
var table = $('<table></table>').addClass('foo');
for (var i = 0; i < 10; i++) {
row = $('<tr></tr>');
for (var j = 0; j < 10; j++) {
var rowData = $('<td></td>').addClass('bar').text('result ' + j);
row.append(rowData);
}
table.append(row);
}
if ($('table').length) {
$("#someContainer tr:first").after(row);
}
else {
$('#someContainer').append(table);
}
});
});
回答by IT ppl
try this
尝试这个
$(function() {
$("#addProduct").click(function() {
if($('#someContainer table').length > 0)
{
var row = $('<tr></tr>');
for(i=0; i<10; i++){
var row1 = $('<td></td>').addClass('bar').text('result ' + i);
row.append(row1);
}
$('#someContainer table').append(row);
}
else
{
var table = $('<table></table>').addClass('foo');
for(i=0; i<10; i++){
var row = $('<tr></tr>');
for(i=0; i<10; i++){
var row1 = $('<td></td>').addClass('bar').text('result ' + i);
table.append(row);
row.append(row1);
}
}
$('#someContainer').append(table);
}
});
});
live demohere.
现场演示在这里。
回答by muneebShabbir
$(function () {
$("#addProduct").click(function () {
var table
if($('#someContainer').find("table").length > 0){
table =$('#someContainer').find("table");
}else{
table = $('<table></table>').addClass('foo');
}
for (i = 0; i < 10; i++) {
var row = $('<tr></tr>');
for (i = 0; i < 10; i++) {
var row1 = $('<td></td>').addClass('bar').text('result ' + i);
table.append(row);
row.append(row1);
}
}
$('#someContainer').append(table);
});
});
try this one DEMO
试试这个DEMO
回答by ryosuke-hujisawa
<html>
<head>
</head>
<body>
<table id="game_table" border="1"></table>
<script language="JavaScript">
gt = document.getElementById('game_table'),
i = 0,
frag = document.createDocumentFragment(),
tr = document.createElement('tr'),
td = document.createElement('td');
while (i<10) {
var _tr = tr.cloneNode(),
j = 0;
while (j<10) {
_tr.appendChild(td.cloneNode());
var min = 1 ;
var max = 3 ;
var a = Math.floor( Math.random() * (max + 1 - min) ) + min ;
var temp = document.createElement('div');
temp.innerHTML = "str";
_tr.appendChild(temp.firstChild);
j++;
}
frag.appendChild(_tr);
i++;
}
gt.appendChild(frag);
</script>
</body>
</html>
回答by Omar
based on @Olrac's answer
基于@Olrac的回答
var tableBody = $('<table></table>').append($("<tbody>"));
$.each(dbRecords,function(index,record){
row = $('<tr></tr>');
$.each(record,function(i,cellValue){
var rowData = $('<td></td>').text(cellValue);
row.append(rowData);
});
tableBody.append(row);
});
$('#contentDiv').append(tableBody);
this worked very nice
这很好用
output
输出
<table>
<tbody>
<tr>
<td>name</td>
<td>age</td>
<td>email</td>
<td>data</td>
</tr>
<tr>
<td>omar</td>
<td>26</td>
<td>[email protected]</td>
<td>123</td>
</tr>
<tr>
<td>ali</td>
<td>22</td>
<td>[email protected]</td>
<td>456</td>
</tr>
</tbody>
</table>
回答by Praveen
If you want to execute it for only once try using .one()in jQuery.
如果您只想执行一次，请尝试在 jQuery 中使用.one()。
$(function () {
$("#addProduct").one("click", function () {
var table = $('<table></table>').addClass('foo');
for (i = 0; i < 10; i++) {
var row = $('<tr></tr>');
for (i = 0; i < 10; i++) {
var row1 = $('<td></td>').addClass('bar').text('result ' + i);
table.append(row);
row.append(row1);
}
}
$('#someContainer').append(table);
});
});
Check JSFiddle.
检查JSFiddle。
