如何使用JavaScript / AJAX将对象插入到HTML表中
如何使用JavaScript / AJAX将对象插入到HTML表中
提问于 2018-08-09 01:46:24
我试图创建一个网站，通过搜索艺术家的名字从音乐论坛中获取信息，并按流行度、曲目数量和发布日期填充艺术家的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>
我真的很想知道这里出了什么问题。
回答 2
Stack Overflow用户
发布于 2018-08-09 03:16:30
假设您正在从post请求中获取所需的数据，我认为问题可能出在：
$('#body').append(html);该选择器查找id='body‘的元素，而您的html中没有该元素。相反，请尝试使用：
$('tbody').append(html);或者把这个id放在tbody html标签上：
<tbody id='body'></tbody>然后，您的脚本将附加到该控件。
接下来，尝试检查开发人员的控制台，查看代码抛出的错误。我可以想象你的代码会出现错误(CTRL-SHIFT-I或者右键单击并选择inspect，这取决于你的web浏览器)。
Stack Overflow用户
发布于 2018-08-09 03:43:14
如果使用示例记录，您会注意到变量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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51752725
复制相关文章
相似问题