logo标签列表

如何将表格添加到DIV中

javascriptjqueryhtml
6
我正在尝试将一个表格追加到 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>

但它不起作用。我想动态地将表格添加到 DIV 块中。
4个回答
12

你想将表格附加到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>
6

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>

3
您正在使用$.each()，但没有传递任何集合供其迭代。
 // ---v---no collection?
$.each(function() {
    html += '<tr><td>' + '</td></tr>';
});

通常情况下，您需要传递一个数组或类似的数据结构。

$.each(["foo", "bar", "baz"], function(i, val) {
    html += '<tr><td>' + val + '</td></tr>';
});

演示: http://jsfiddle.net/VLfvv/

请注意，这与.each()方法略有不同，该方法操作jQuery对象，因此对象的成员成为值。

$(".foobar").each(function(i, el) {
    // do something with the element
});

请注意，如果你只是想添加这个空表格，那么可以很容易地在不使用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);
}
0
你应该使用以下内容：
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;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接