Question

我使用javascript将内容附加到模态。我将不同的数据附加到不同的表行和表格单元格。

<table class="table table-striped">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
    </thead>

我希望我的数据，例如，名称，进入第1列，id要进入第2列等等。然后在第一组循环完成时创建一个新的tr。

我循环如下，但这似乎不起作用

for (row = 0; row < $(this).data("name").length; row++) {
    $("#myModal").find(".table").append("<tr><td>" + $(this).data("name")[row] + "</td>");

    for (row = 0; row < $(this).data("id").length; row++) {
        $("#myModal").find(".table").append("<tr><td>" + $(this).data("id")[row] + "</td>");

        for (row = 0; row < $(this).data("fruit").length; row++) {
            $("#myModal").find(".table").append("<tr><td>" + $(this).data("fruit")[row] + "</td>");

            for (row = 0; row < $(this).data("state").length; row++) {
                $("#myModal").find(".table").append("<tr><td>" + $(this).data("state")[row] + "</td></tr></tbody></table>");
            }
        }
    }
}

此外，我的数据元素是不同的数组，并且长度不同。

Answer 1

嗯，我想它不起作用，因为这里的一切都不正确。对不起，但是......

首先，您使用jQuery就像构建一个HTML字符串一样。可能在这里复制服务器端代码？ jQuery（和某些方面的JS）不使用字符串，它适用于DOM元素。所以你不要在开头添加<tr><td>，把你的一些内容添加到内容中，然后再进行“＆”。你这样做：

var row = $('<tr></tr>');
var elem = $('<td></td>');
elem.html('someText');
row.append(elem);

或只是：

$('<tr></tr>').append('<td>someText</td>');

它已经在jQuery容器中创建了一个TableRow元素，您可以使用console.log(row[0])进行检查，它不仅仅是HTML字符串的开头，而是完全权限的JS对象可以附加到页面上的其他DOM元素，并可以通过调用其方法将其他元素添加到其中。

其次，即使它会像这样工作，使用字符串，你将一个循环放入一个循环进入另一个循环内的循环中......并想象它添加</td></tr></tbody></table>多少次进入你的页面。肯定不是这里的东西。

第三，你使用一个变量（window.row导致任何没有var或let关键字创建的变量是window属性）作为每个嵌套的计数器周期。他们用自己的逻辑覆盖它，把所有东西变成乱七八糟的东西，它会陷入无休止的循环中，或只会工作一次，或者......无论发生什么事情都会发生！

所以也许我不明白，但你的代码不起作用，因为它无论如何都无法工作。

通过循环附加到javascript模态

1 个答案: