JavaScript JS异步加载table列表

最新推荐文章于 2024-08-31 07:39:08 发布

coding_forever

最新推荐文章于 2024-08-31 07:39:08 发布

阅读量4.9k

点赞数

分类专栏： js JavaScript 异步刷新前端开发文章标签： javascript js 异步刷新列表

本文链接：https://blog.csdn.net/liuyuqin1991/article/details/50592537

版权

js 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 0 订阅

订阅专栏

前端开发

8 篇文章 0 订阅

订阅专栏

使用原生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;
        }