JavaScript JS异步加载table列表

最新推荐文章于 2022-03-19 17:13:59 发布

原创最新推荐文章于 2022-03-19 17:13:59 发布 · 4.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #异步刷新列表

js 同时被 3 个专栏收录

18 篇文章

订阅专栏

JavaScript

15 篇文章

订阅专栏

前端开发

8 篇文章

订阅专栏

本文介绍如何使用原生JavaScript实现从后台异步加载数据，并动态构建表格内容。通过解析返回的数据，逐行生成表格行及单元格，实现商品列表的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用原生JS异步加载后台查询出的list并刷新table显示

首先是html

<table id="generatedTable" style="border:2"; onclick="javascript:GoSel(event);">
    <thead>
    <tr>
        <th style='width:3%; text-align: left'>ID</th>
        <th style='width:10%; text-align: left'>商品编码</th>
        <th style='width:5%; text-align: left'>是否审核</th>
        <th style='width:5%; text-align: left'>是否启用</th>
        <th style='width:10%; text-align: left'>商品名称</th>
        <th style='width:5%; text-align: left'>简称</th>
    </tr>
    </thead>
    <tbody id="tbodyContent"></tbody>
</table>

JS代码

核心思想就是获取到后台传递来的List集合，然后拼凑出一个tbody，然后显示

function buildTbody(data){
            var tbody = document.getElementById("tbodyContent"); //获取tbody对象
            //先清空tbody
            tbody.innerHTML = "";
            var libGoodsList = data;
            for (var i = 0; i < libGoodsList.length; i++) {
                var tr = document.createElement("tr"); //创建tr
                for (var name in libGoodsList[i]) {
                    var td = document.createElement("td"); //创建td
                    var value = libGoodsList[i][name];
                    if (name == "id") { //对象字段：ID
                        td.innerHTML = value;
                    }
                    else if (name == "barcode") { //对象字段：条形码
                        td.innerHTML = value;
                    }
                    else if (name == "name") {  //对象字段：名称
                        td.innerHTML = value;
                    }
                    else if (name == "shortName") {  //对象字段：简称
                        td.innerHTML = value;
                    }
                    else if (name == "isAudit") {  //对象字段：是否审核
                        if(value == false){
                            td.innerHTML = "未审核";
                        }
                        else td.innerHTML = "已审核";
                    }
                    else if (name == "isEnabled") {  //对象字段：是否启用
                        if(value == false){
                            td.innerHTML = "停用";
                        }
                        else td.innerHTML = "启用";
                    }
                    else {
                        continue;  //排除剩余的 
                    }
                    tr.appendChild(td);  //附加到tr节点
                }
                tbody.appendChild(tr); //附加到tbody节点
            }
        }


        /*table中选中行后 ，选中行变黄*/
        function GoSel(evt) {
            selectGoodsId = null;
            var el = evt.srcElement?evt.srcElement:evt.target;
            if(el.tagName.toUpperCase() !="TD") return;
            var tr = el.parentNode;
            tr.style.backgroundColor="yellow";
            if(selTr !=null)
            {
                selTr.style.backgroundColor ="white";
            }
            selTr = tr;
        }