使用javascript将行添加到html表

时间:2016-07-15 11:45:47

标签: javascript jquery ajax datatable

当我的数据来自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);
        }
    });

我的实际目标是向footable datatable插件添加行,但我也无法修复它。

1 个答案:

答案 0 :(得分:1)

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

1)你的循环不起作用,因为条件i > data.length永远不会成立。我建议使用jQuery.each(...)来循环数据。或者将其修改为i < data.length,但您还必须从var i = 0开始。

2)你的html中不存在$('#location tbody')。这将是ID为tbody的元素内的location元素。您想要$('tbody#location')或仅$('#location'),因为您不应该在html中拥有多个具有相同ID的项目。

3)thead内的html不正确。它将以这种方式工作,但它不是干净的HTML。

希望此列表有所帮助。它基本上总结了评论。 (感谢你们所有人!)