gpt4 book ai didi

javascript - 在 HTML 中动态向表添加行

转载 作者:行者123 更新时间:2023-11-28 18:32:48 24 4
gpt4 key购买 nike

如何通过从网页获取这些行的数据来自动向 HTML 表格添加新行。

<table class="sortable">
<thead>
<tr>
<th>Foldername</th>
<th>Subfolder</th>
</tr>
</thead>
<tbody>
<tr class='$class'>
<td><span id="albumname"></span></td>
<td><span id="subdirname"></span></td>
</tr>
</tbody>
</table>

Foldername 和 Subfolder 是标题,不需要更改它们,但 albumname 和 subdirname 必须更改每行相应的值。

我使用 websocket 获取数据:

 $.get("http://localhost:8040/api/album", function (data) {
console.log("data: ", data);
var i;
var j;
console.log(i);
for (i = 0; i < data.length; i++) {
console.log("start for loop");
var albname = data[i].Name;
console.log("albname: ", albname);
$("#albumname").text(albname);
var subalbum = data[i].SubAlbums
for (j = 0; j < subalbum.length; j++) {
var subname = data[i].SubAlbums[j];
console.log("SubName: ", subname);
$("#subdirname").text(subname);
}
}
});

最佳答案

添加一个类到<body>像这样,

<tbody class="tableBody">

</tbody>

并按如下方式更新您的 jQuery 代码,假设每个专辑有多个子目录名。

$.get("http://localhost:8040/api/album", function (data) {
var i;
var j;
$('.tableBody').html('');
for (i = 0; i < data.length; i++) {
console.log("start for loop");
var albname = data[i].Name;

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

var albumNameTd=$('<td>');
albumNameTd.text(albname);

var subDirNameTd=$('<td>');
var subDirHtml="";

var subalbum = data[i].SubAlbums;

for (j = 0; j < subalbum.length; j++) {
var subname = data[i].SubAlbums[j];
subDirHtml+=subname;
if(j!=subalbum.length-1) {
subDirHtml+="<br>";
}
}
subDirNameTd.html(subDirHtml);
bodyTr.append(albumNameTd);
bodyTr.append(subDirNameTd);
$('.tableBody').append(bodyTr);
}
});

关于javascript - 在 HTML 中动态向表添加行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37658539/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com