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

纳尔哒哒

已于 2023-11-06 19:48:50 修改

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： layui JavaScript 文章标签： javascript layui 前端

于 2023-10-17 20:21:20 首次发布

本文链接：https://blog.csdn.net/weixin_50963877/article/details/133893200

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

          d