原生js 实现table表格

首先: 定义一个表头(改表头的作用是，固定表头的展示，不至于tabody数据过多时，页面滚动导致表格头部滚动)

                <table id="dev-title" class="table  table-hover" style="margin-bottom: 0; table-layout:fixed;">
                    <colgroup>
                        <col style="width:10%"/>
                        <col style="width:10%"/>
                        <col style="width:10%"/>
                        <col style="width:10%"/>
                        <col style="width:13%"/>
 
                    colgroup>
                    <thead>
                    <tr class="title">
                        <th>所在小区th>
                        <th>台变th>
                        <th>异动类型th>
                        <th>表箱名th>
                        <th>时间th>
                    tr>
                    thead>
                table>

其次定义表格的body部分：

                <div class="table-scrollable table-scrollable-my ">
                    <table class="table  table-hover dev-tab" style="table-layout:fixed;">
                        <colgroup>
                            <col style="width:10%;"/>
                            <col style="width:10%"/>
                            <col style="width:10%"/>
                            <col style="width:10%"/>
                            <col style="width:13%"/>
                        colgroup>
                        <tbody>
                        tbody>
                    table>
                div>
 
            div>

需要注意的是，两个colgroup的col定义的宽度要一致，这样才可以实现表格的宽度自适应。

其次，给表格body赋值：

    function drawFormList_bd(data){  // 定义一个渲染表格数据的方法
        console.log(data,'6666666666')
        var $listItem = $('\
                         \
                        \
						\
						\
						\
					');
        var $from = $(".dev-tab tbody").empty(); // 每次进入该方法，先让表格的tbody为空
        if(data.records && data.records.length>0){
            $(data.records).each(function(i){ // 循环给表格赋值
                var self = this;
                var $tmp = $listItem.clone();
                $tmp.find('.taiBian').html(this.substationName);
                $tmp.find('.xiaoQu').html(this.courtName)
                $tmp.find('.meterBoxName').html(this.meterBoxName);
                if(this.diffType == '2'){
                    $tmp.find('.type').html("增加");
                }else{
                    $tmp.find('.type').html("减少");
                }
                $tmp.find('.repairTime').html(this.createTime ? moment(this.createTime).format("YYYY-MM-DD HH:mm:ss") : "-");
                $from.append($tmp); // 将定义的html结构添加到刚刚表格的tbody下面
            });
        }else{
            $from.append('抱歉，没有找到数据');
        }
    }