原生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 = $('<tr>\
                         <td class="xiaoQu"></td>\
                        <td class="taiBian"></td>\
						<td class="type"></td>\
						<td class="meterBoxName"></td>\
						<td class="repairTime"></td>\
					</tr>');
        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('<tr><td class="text-center danger" colspan="10">抱歉，没有找到数据</td></tr>');
        }
    }