javascript - 使用 javascript 将行追加到 html 表

Question

当我的数据来自 json 时，我尝试使用此代码为我的数据表附加行。但这没有用。我该如何解决这个问题？

<table style="width:300px" >
    <thead>
            <th>
                Name
            </th>


    </thead>
    <tbody id="location">


    </tbody>
</table>

<小时/>

    $.ajax(
    {
        type: "GET",
        url: 'http://jsonplaceholder.typicode.com/users',
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,
        success: function (data) {

            var trHTML = '';
            for (var i = 1; i > data.length; i++) {
                console.log(data[i].name);
                trHTML += '<tr><td><span>' + data[i].name + '</span></td></tr>';

            };
            $('#location tbody').append(trHTML);


        },

        error: function (msg) {

            alert(msg.responseText);
        }
    });

我的实际目标是向可移动数据表插件添加行，但我也无法修复它。

Answer 1

您的代码存在一些问题。大多数已经在评论中提到了:

1) 你的循环不起作用，因为条件 i > data.length从来都不是真的。我建议使用jQuery.each(...)循环数据。或者修复为i < data.length但你还必须从 var i = 0 开始.

2) $('#location tbody')您的 html 中不存在。那将是 tbody id 为 location 的元素内的元素。您想要$('tbody#location')或者只是 $('#location')因为无论如何，你的 html 中不应该有多个具有相同 id 的项目。

3) 你的html里面thead是不正确的。它会以这种方式工作，但它不是干净的 html。

希望这个列表有帮助。它基本上总结了评论。 (谢谢大家!)