动态生成table-并且在table中添加按钮--同时添加按钮事件

最新推荐文章于 2024-08-19 12:27:16 发布

原创最新推荐文章于 2024-08-19 12:27:16 发布 · 7.3k 阅读

10 ·

CC 4.0 BY-SA版权

Html+JavaScript+css 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态填充HTML表格的方法。通过解析后端返回的JSON数据，为每个表格行构建HTML字符串，并将其追加到指定的表格元素中。这种方法能够有效地展示不同组别的统计数据，包括组名、总数及使用数等。

success: function(json) {
//alert(JSON.stringify(json));
var grouptable = $("#table1");
var arr = json.groups;
for (var i = 0; i < arr.length; i++) {
var gnamevalue = arr[i].gname;
var numbervalue =arr[i].total;
var usenumvalue =arr[i].usenum;
var tr = '';
tr = tr+'<tr>';
tr = tr + '<td>'+gnamevalue +'</td>';
tr = tr + '<td></td>';
tr = tr + '<td>'+numbervalue +'</td>';
tr = tr + '<td>'+'<button style="width: 60px; background-color: #6D84B4; color: white;" onclick=\"renumber(this,1)\">修改</button>'+'</td>';
tr = tr + '<td></td>';
tr = tr + '<td>'+usenumvalue+'</td>';
tr = tr + '<td>'+'<button style=\"width: 100px; background-color: #6D84B4; color: white;\" onclick=\"lookusenumber(\''+gnamevalue+'\')\">查看下载记录</button>'+'</td>'; 这里要特别注意不是双引号，而是两个单引号
tr =tr +'</tr>';
grouptable.append(tr);
}
},