使用原生js和layui动态创建一个数据表格，实现简单增删改查功能

使用原生js

        动态创建表格，先在html里面写入表头thead里的内容，然后写一个空的tbody。

        接下来使用js来读取数据，并创建表格，我们使用双重循环来遍历数组中存储的对象，并创建tr 和td加以赋值        

  var tbody = document.querySelector('tbody');

    for (var i = 0 ; i < datas.length; i++) {

        var tr = document.createElement('tr');

        tbody.appendChild(tr);

        for (var k in datas[i]) {

            var td = document.createElement('td');

            td.innerHTML = datas[i][k];

            tr.appendChild(td);

        }

        var td = document.createElement('td');

        td.innerHTML = '<a href="javascript:;">删除</a>';

        tr.appendChild(td);

}

        这样已知数据的表格已经生成，接下来我们加入添加按钮，加入三个input框，用于取用户输入的值。原理与上面相同，代码具体如下：

var tian = document.querySelector('.tianjia');

var as = document.getElementsByTagName('a'); //定义删除按钮

    tian.addEventListener('click', function () {



        var names = document.querySelector('#input_1');

        var kemu = document.querySelector('#input_2');

        var scores = document.querySelector('#input_3');

            if (names.value=='' || kemu.value=='' || scores.value=='') {  //判断空值

                alert('缺少数据');

            } else {

          datas.push({name:names.value ,  subject:kemu.value,  score:scores.value});

//将数据追加进数组里

                let tr = document.createElement('tr');

                let td = document.createElement('td');

                tbody.appendChild(tr);

                for (var k in datas[i]) {

                     td = document.createElement('td');

                    td.innerHTML = datas[datas.length-1][k];

                    tr.appendChild(td);

                };

                td = document.createElement('td');

                td.innerHTML = '<a href="javascript:;">删除</a>';

                tr.appendChild(td);

               

   

                for (let i = 0; i < as.length; i++) {  //根据索引值来删除对应的行

                    as[i].onclick = function (){

                        tbody.removeChild(this.parentNode.parentNode);

                    }

                }

                names.value = '';

                kemu.value = '' ;

                scores.value = '';

            }

});

        根据以上办法可以做到动态数据表格。但是代码太过繁琐，所以，在学习了layui之后我们使用layui来制作数据表格。

使用layui

        相比原生js来说，layui则比较便捷，只需要在html里创建一个容器，写一行table代码即可

<div class="table" >

        <table class="layui-hide" id="taskList" lay-filter="taskList"></table>

    </div>

如果要加入表头事件也只要加入相应的模块就可。

js部分：

<script>

layui.use('table', function(){

var table = layui.table;

table.render({

elem: '#demo'

,height: 312

,url: '/demo/table/user/' //数据接口  或者写成data：data；读取数据对象

,page: true //开启分页

,cols: [[ //表头

{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}

,{field: 'username', title: '用户名', width:80}

,{field: 'sex', title: '性别', width:80, sort: true}

,{field: 'city', title: '城市', width:80}

]]  });});

</script>

通过以上的方法我们可以构建一个已知数据的静态表格。如果我们需要对表格进行操作，只要加上将事件即可

事件语法：table.on('event(filter)', callback);

注：event 为内置事件名，filter 为容器 lay-filter 设定的值

这里我们主要用到头工具事件和行工具事件，也就是先在

table.render({

  elem: '#demo'

  ,toolbar: '#toolbarDemo'

  //,…… //其他参数  });

里面写入toolbar属性，和工具栏模板绑定起来，然后再触发事件

table.on('toolbar(test)', function(obj){

  switch(obj.event){

    case 'add':

      layer.msg('添加');

break;}  

}）

以上代码虽然便捷但是layui并没有给出添加行事件的代码，所以这里我们灵活运用一下：

灵活加入添加操作

给表头的每一列里面加入edit = text的属性，让其可以进行输入编辑。

给layuiuse（‘table’，function（））的function起个名字tab，然后再参考layui的编辑事件来加一个添加按钮，使lay-event = add；然后在判断语句中加入添加模块。添加时，给数据数组data追加一个只有键，值为空的对象。然后再调用一次tab函数，重绘一次表格，这样就加了一行空的数据行出来，再在里面输入即可。

layui.use('table', function tab(){

    var table = layui.table;



    table.render({

        elem: '#test'

        ,data:dataa

        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板

        ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可

            title: '提示'

            ,layEvent: 'LAYTABLE_TIPS'

            ,icon: 'layui-icon-tips'

        }]



        ,title: '用户数据表'

        ,cols: [[

            {type: 'checkbox', fixed: 'left'}

            ,{field:'id', title:'工步号', width:80, fixed: 'left', unresize: true,edit: 'text', sort: true}

            ,{field:'username', title:'工步内容及说明', width:120, edit: 'text'}

            ,{field:'email', title:'注意事项', width:150, edit: 'text', templet: function(res){

                    return '<em>'+ res.email +'</em>'

                }}

            ,{field:'sex', title:'设备', width:100,toolbar:'#bar',}  

        ]]

        ,page: true

});



    //监听行工具事件

    table.on('tool(test)', function(obj){

        var data = obj.data;

        if(obj.event === 'del'){

            layer.confirm('真的删除这一行么', function(index){

                obj.del();

                layer.close(index);

            });

        } else if(obj.event === 'edit'){

            layer.prompt({

                formType: 2

                ,value: data.email

            }, function(value, index){

                obj.update({

                    email: value

                });

                layer.close(index);

            });

        } else if(obj.event === 'add') {

            layer.msg('添加');

            dataa.push({

                id:""

                ,username:""

                ,email:""

                ,sex:""

                });

        tab();



        }

    });

});