如何使用 JavaScript/AJAX 将对象插入到 HTML 表格中

Question

我正在尝试创建一个站点，该站点通过搜索艺术家姓名从音乐论坛中获取信息，并按流行度、曲目数量和发行日期填充艺术家 5 首顶级专辑。信息从站点中正确提取，但是当我去创建和 HTML 表时，没有显示任何信息。搜索按钮功能正常，它调用所有正确的信息，可以帮助提供一个解决方案，在该解决方案中我可以从数组中提取信息并在 HTML 中填充/创建表格？下面是我目前正在使用的代码。function searchClicked() {   var artist_name = document.getElementById("artistName").value;   var data = {};   data.ArtistName = artist_name    $.ajax({        type: "POST",        url: "/Home/SearchAlbum",        data: JSON.stringify(data),        success: function (responseData) {            debugger;            function writeTable() {                var html = ''                for (var i = 0; i < responseData; i++)                    html += '<tr>';                for (var j = 0; j < totalCells; j++) {                    html += '<td>' + array[count] + '</td>';                    count++;                }                html += '</tr>';            }                        $('#body').append(html);                        count = 0;                    },                 contentType: "application/json; charset=utf-8",   })table {    width: 100%}table, th, td {    border: 1px solid black;    border-collapse: collapse;}th, td {    padding: 5px;    text-align: left;}table#artistName tr:nth-child(even) {    background-color: aquamarine}table#artistName tr:nth-child(odd) {    background-color: aquamarine}table#artistName th {    background-color: black;    color: white;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="jumbotron">   <p> Enter Artist Name:</p>   <input id="artistName" type="text" />   <button id="seachButton" onclick="searchClicked()">seach</button> </div><table id="ALbumInfo">  <thead>     <tr>      <th>Album Name </th>      <th>Release Date</th>      <th>Popularity</th>      <th>Number of Tracks</th>     </tr>  </thead>  <tbody></tbody></table>我真的很想了解这里出了什么问题。

Answer 1

假设您从该发布请求中获取所需的数据，我认为问题可能在于：

$('#body').append(html);

该选择器查找 id='body' 的元素，而您的 html 中没有该元素。相反，请尝试使用：

$('tbody').append(html);

或者将该 id 放在您的 tbody html 标签上：

<tbody id='body'></tbody>

然后您的脚本将附加到该控件。

继续尝试检查开发人员的控制台以查看您的代码抛出的错误。我想您的代码会出现错误（CTRL-SHIFT-I 或右键单击并选择检查，具体取决于您的网络浏览器）。

Answer 2

如果您将其与示例记录一起流出，您会注意到该变量html将具有类似于以下内容的值：<tr><tr><tr><tr></tr>--取决于从您的 AJAX 请求返回的记录数。

当然，这假设运行时不会因为totalCells未定义而崩溃。（以及array和count。）

您的问题也有更好的方法。我会推荐：

    var table = $('<table><tbody></tbody></table>');

    var tbody = table.children('tbody');

    for (var i = 0; i < responseData.length; i++) {

        var tr = $('<tr></tr>');

        for (c = 0; c < totalCells; c++) {

            tr.append($('<td></td>').html(array[c]));

        }

        tbody.append(tr);

    }

    $('body').append(table);