layui table点击按钮添加、删除一行

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Rec_Mervyn/article/details/83241925

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();
	}
});

---

以上就是动态添加一行、删除一行的实现过程。

需要注意的是：

1. layui form元素需要重新渲染才显示
2. 如果为添加、删除按钮绑定点击事件是使用$('.class').click(function() {});这种方式的话，动态添加的元素是无效的，需要使用$('body').on('click', '.class', function() {})的方式绑定事件