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

最新推荐文章于 2024-04-29 16:07:47 发布

原创最新推荐文章于 2024-04-29 16:07:47 发布 · 1.4w 阅读

23 ·

CC 4.0 BY-SA版权

Layui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用layuitable实现动态添加和删除表格行的功能，包括添加和删除按钮的事件绑定，以及添加后的元素渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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() {})的方式绑定事件