jQuery 如何将表附加到 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16341681/
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 append table to DIV
提问by Paul Roub
I am trying to append a table to div:
我正在尝试将表附加到div：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function addStuff() {
var html = '<table>';
$.each(function() {
html += '<tr><td>' + '</td></tr>';
});
html += '</table>';
$("#divResults").append(html);
}
</script>
</head>
<body>
<div id="divResults"></div>
<button onclick="addStuff()">Add Stuff</button>
</body>
</html>
But it is not working. I want to dynamically add table to the DIV block.
但它不起作用。我想动态地将表添加到 DIV 块。
回答by vaibhav jain
You want to append table to the DIV try this....
你想将表附加到 DIV 试试这个....
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function addTable()
{
$('#divResults').append('<table width="320" border="1"><tr><td colspan="2" rowspan="1">' + " wdw" + '</td></tr><tr><td width="118">' + "sxs" + '</td><td width="186">' + "xs" + '</td></tr></table>');
}
</script>
</head>
<body>
<div id="divResults">
</div>
<button onclick="addTable()">Add Stuff</button>
</body>
</html>
回答by Paul Roub
eachwhat? Your $.eachmethod needs to loop over something. e.g.
each什么？你的$.each方法需要循环一些东西。例如
function addStuff() {
var words = ['one', 'two', 'three'];
var html = '<table>';
$.each(words, function(i, word) {
html += '<tr><td>' + word + '</td></tr>';
});
html += '</table>';
$("#divResults").append(html);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divResults"></div>
<button onclick="addStuff()">Add Stuff</button>回答by Paul Roub
You're using $.each()but not passing any collection for it to iterate.
您正在使用$.each()但未传递任何集合以进行迭代。
// ---v---no collection?
$.each(function() {
html += '<tr><td>' + '</td></tr>';
});
Normally you'd pass an Array or something.
通常你会传递一个数组或其他东西。
$.each(["foo", "bar", "baz"], function(i, val) {
html += '<tr><td>' + val + '</td></tr>';
});
DEMO:http://jsfiddle.net/VLfvv/
演示：http ://jsfiddle.net/VLfvv/
Note that this is a little different from the .each()method, which operates on a jQuery object, so the members of the object become the value.
请注意，这.each()与操作 jQuery 对象的方法略有不同，因此对象的成员成为值。
$(".foobar").each(function(i, el) {
// do something with the element
});
Also note that if all you want is to add this empty table, it could easily be done without jQuery.
另请注意，如果您只想添加此空表，则无需 jQuery 即可轻松完成。
function addStuff() {
var html = '<table>';
for (var i = 0; i < 10; i++)
html += '<tr><td>' + '</td></tr>';
html += '</table>';
document.getElementById("divResults")
.insertAdjacentHTML("beforeend", html);
}
回答by JoshSabb
You should use the following:
您应该使用以下内容：
var myTable = document.createElement("img");
var row1 = gameGrid.insertRow(0);
var row2 = gameGrid.insertRow(1);
var col1 = row1.insertCell(0);
var col2 = row2.insertCell(1);
col1.innerText = "some thing";
document.getElementById("divResults").innerHtml = myTable;
