【开发记录】之 table动态添加th、td

本方法采用的是jQuery！！

首先，设置好table容器，

接着，就可以通过点击事件，来调取接口里面的数据，并进行动态添加。

总体代码如下：

success: function(data){
                $('#contentShowNum').text(data.data.totalCount);
                $('#pageShowNum').text(data.data.totalPage);
                $('#tableCont').html('');
                // 添加th
                var tempList = Object.keys(data.data.list[0]);
                var contentTh = "<tr>";
                for (var h = 0; h < tempList.length; h++) {
                    contentTh += '<th>' + tempList[h] + '</th>'
                }
                contentTh += "</tr>";
                $('#tableCont').append(contentTh);
                // 添加td
                for (var i = 0; i < data.data.list.length; i++) {
                    var contentTd = "<tr>";
                    for (var j in data.data.list[i]) {
                        contentTd += '<td>' + JSON.stringify(data.data.list[i][j]) + '</td>'
                    }
                    contentTd += "</tr>";
                    $('#tableCont').append(contentTd);
                }
            },
            error:function (e){
                alert('操作失败');
            }复制

1.定义table内容为空

$('#tableCont').html('');

 2.通过数据的键值对，来获取表头信息

var tempList = Object.keys(data.data.list[0]);

3.向table里面添加th

                var contentTh = "<tr>";
                for (var h = 0; h < tempList.length; h++) {
                    contentTh += '<th>' + tempList[h] + '</th>'
                }
                contentTh += "</tr>";
                $('#tableCont').append(contentTh);复制

4.再通过双层for循环，来动态添加每一个tr

 
                for (var i = 0; i < data.data.list.length; i++) {
                    var contentTd = "<tr>";
                    for (var j in data.data.list[i]) {
                        contentTd += '<td>' + JSON.stringify(data.data.list[i][j]) + '</td>'
                    }
                    contentTd += "</tr>";
                    $('#tableCont').append(contentTd);
                }复制

这样子就可以实现动态添加table数据啦！

如果对您有帮助，麻烦您动动小手点一个赞，您的鼓励将是我前进的动力！