jQuery 如何使用jquery创建一个包含行的新表并将其包装在div中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1413952/
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
How to create a new table with rows using jquery and wrap it inside div
提问by kratz
I would like to create table inside a div element
我想在 div 元素内创建表格
On my .html file, I have this
在我的 .html 文件中，我有这个
<div id='div1'> </div>
On my js file, I want to place new table with rows and with data
在我的 js 文件中，我想放置带有行和数据的新表
How can I implement this?
我该如何实施？
回答by tvanfosson
Assuming you have the HTML for the table, you can simply create a jQuery object out of it and append it to the DIV. If you have the data, you'll need to iterate through it and create the cells/rows from the data and add them independently.
假设您有表格的 HTML，您可以简单地从中创建一个 jQuery 对象并将其附加到 DIV。如果您有数据，则需要遍历它并从数据创建单元格/行并独立添加它们。
$('<table><tr><td>.....</td></tr></table>').appendTo( '#div1' );
or
或者
var data = [ [ 1, 2, 3 ], [ 4, 5, 6 ], [7, 8, 9 ] ];
var html = '<table><thead><tr>...</tr></thead><tbody>';
for (var i = 0, len = data.length; i < len; ++i) {
html += '<tr>';
for (var j = 0, rowLen = data[i].length; j < rowLen; ++j ) {
html += '<td>' + data[i][j] + '</td>';
}
html += "</tr>";
}
html += '</tbody><tfoot><tr>....</tr></tfoot></table>';
$(html).appendTo('#div1');
回答by John Nicely
There are many different ways you could go with this. One way is to do something like this:
有很多不同的方法可以解决这个问题。一种方法是做这样的事情：
// $(document).ready() makes sure that nothing happens until the page
// is fully loaded. It's important because the div may not have loaded
// yet if you put code outside of this
$(document).ready( function() {
$("#div1").append(
"<table><tr><td>My column 1, row 1</td>" +
"<td>My column 2, row 2</td></tr>" +
"<tr><td>My column 1, row 2</td>" +
"<td>My column 2, row 2</td></tr></table>");
});
This will put the full table into your div, parsed as HTML. Another way, if you want to add each row separately, would be:
这会将整个表格放入您的 div 中，解析为 HTML。另一种方法，如果你想分别添加每一行，将是：
$(document).ready(function() {
$("#div1").append("<table id=\"my_table1\"></table>");
$("#my_table1").append("<tr><td>Row 1</td></tr>");
... insert more rows here ...
$("#my_table1").append("<tr><td>Row ...</td></tr>");
});
It's important to understand that .append()will put the HTML or text you enter insideof whatever element you selected using the dollar-sign selector ($("selector text"))
重要的是要了解，这.append()会将您输入的 HTML 或文本放入您使用美元符号选择器 ( $("selector text"))选择的任何元素中
回答by GGSoft
FOR EXAMPLE YOU HAVE RECIEVED JASON DATA FROM SERVER.
例如，您已从服务器收到 JASON 数据。
var obj = JSON.parse(msg);
var tableString ="<table id='tbla'>";
tableString +="<tr><th>Name<th>City<th>Birthday</tr>";
for (var i=0; i<obj.length; i++){
tableString +=gg_stringformat("<tr><td>{0}<td>{1}<td>{2}</tr>",obj[i].name, obj[i].city, obj[i].birthday);
}
tableString +="</table>";
$('#divb').html(tableString);
HERE IS THE CODE FOR gg_stringformat
这是 gg_stringformat 的代码
function gg_stringformat() {
var argcount = arguments.length,
string,
i;
if (!argcount) {
return "";
}
if (argcount === 1) {
return arguments[0];
}
string = arguments[0];
for (i = 1; i < argcount; i++) {
string = string.replace(new RegExp('\{' + (i - 1) + '}', 'gi'), arguments[i]);
}
return string;
}
回答by vishwakarma09
HTML having this structure:
具有这种结构的 HTML：
<html>
<head>
<body>
<div id="container">
<div id="row0" class="row">
<div id="col0" class="column">
<div id="col1" class="column">
<div id="col2" class="column">
</div>
<div id="row1" class="row">
<div id="col0" class="column"></div>
<div id="col1" class="column"></div>
<div id="col2" class="column"></div>
</div>
<div id="row2" class="row">
<div id="col0" class="column"></div>
<div id="col1" class="column"></div>
<div id="col2" class="column"></div>
</div>
</div>
</body>
</html>
This is the jquery code
这是jquery代码
$(document).ready(function(){
var row,col,rowid,colid;
for(i=0;i<=2;i++){
row='<div id=\"row'+i+'\" class=\"row\"></div>';
$("#container").append(row);
for(j=0;j<=2;j++){
col='<div id=\"col'+j+'\" class=\"column\"></div>';
$("#row"+i).append(col);
$("#col"+j).append(flipper);
}
}
});
回答by John Fisher
var newContent = $('<your html="here"/>');
var insertLocation = $('#div1');
insertLocation.append(newContent);
