首页代码展示，var定义data，创建一个带新增功能的layui表格，新增按钮在表格的倒数第一行第二个位置，并前面添加序列号

代码展示，var定义data，创建一个带新增功能的layui表格，新增按钮在表格的倒数第一行第二个位置，并前面添加序列号

时间: 2024-05-11 20:17:42 浏览: 90

好的，以下是该段代码所需的实现：需要引入 layui 和 jquery 的相应文件 HTML： ```html <body> <div class="layui-container"> <table id="demo" lay-filter="demo"></table> </div> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="add">新增</a> </script> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://cdn.layui.com/layui/2.5.5/layui.js"></script> <script src="./test.js"></script> </body> ``` JavaScript: ```javascript $(document).ready(function () { var data = [ { id: 1, name: "Jack", sex: "male", age: "20" }, { id: 2, name: "Lucy", sex: "female", age: "18" }, { id: 3, name: "Tom", sex: "male", age: "22" }, { id: 4, name: "John", sex: "male", age: "25" }, { id: 5, name: "Kate", sex: "female", age: "21" } ]; layui.use('table', function () { var table = layui.table; //方法级渲染 table.render({ elem: '#demo' , toolbar: '#barDemo' , cols: [[ //表头 { type: 'numbers', title: '序号' } , { field: 'id', title: 'ID', width: 80 } , { field: 'name', title: '姓名', width: 120 } , { field: 'sex', title: '性别', width: 80 } , { field: 'age', title: '年龄', width: 80 } ]] , data: data }); //监听行工具事件 table.on('tool(demo)', function (obj) { var data = obj.data; //console.log(obj) if (obj.event === 'add') { var newRow = { id: null, name: "", sex: "", age: "" }; table.append(newRow); } }); }); }); ``` 其中，`data` 是一个保存表格数据的数组，`table.render()` 用来渲染表格，`table.on()` 用来监听表格工具栏的事件。

阅读全文