使用原生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();
}
});
});