layui table点击按钮添加、删除一行
好久没发东西了,今天说一下最近学到的东西吧。
首先这一篇是layui table点击按钮动态添加、删除一行的实现。
当然别的也可以,比如添加div之类的,只是这里以layui table来举例。
layui table有多种渲染方式,由于方法渲染table的动态添加没有很好的实现,所以这里只说静态表格和自动渲染。
table
<table class="layui-table" id="table" lay-filter="table">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="layui-input" name="uName"></td>
<td>
<select>
<option value=""></option>
<option value="0">女</option>
<option value="1">男</option>
</select>
</td>
<td>
<a class="layui-btn layui-btn-xs add">添加</a>
<a class="layui-btn layui-btn-danger layui-btn-xs del">删除</a>
</td>
</tr>
</tbody>
</table>
添加一行
//因为动态添加的元素class属性是无效的,所以不能用$('.add').click(function(){});
$('body').on('click', '.add', function() {
//你要添加的html
var html = '<tr>'+
'<td><input type="text" class="layui-input" name="uName"></td>'+
'<td>'+
'<select>'+
'<option value=""></option>'+
'<option value="0">女</option>'+
'<option value="1">男</option>'+
'</select>'+
'</td>'+
'<td>'+
'<a class="layui-btn layui-btn-xs add">添加</a>'+
'<a class="layui-btn layui-btn-danger layui-btn-xs del">删除</a>'+
'</td>'+
'</tr>';
//添加到表格最后
$(html).appendTo($('#table tbody:last'));
form.render();//因为有select元素,所有添加后要重新渲染一次
});
删除一行
$('body').on('click', '.del', function() {
if ($('#table tbody tr').length === 1) {
layer.msg('只有一条不允许删除。', {
time : 2000
});
} else {
//删除当前按钮所在的tr
$(this).closest('tr').remove();
}
});
以上就是动态添加一行、删除一行的实现过程。
需要注意的是:
- layui form元素需要重新渲染才显示
- 如果为添加、删除按钮绑定点击事件是使用
$('.class').click(function() {});
这种方式的话,动态添加的元素是无效的,需要使用$('body').on('click', '.class', function() {})
的方式绑定事件