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

本文介绍如何使用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();
	}
});

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

需要注意的是:

  1. layui form元素需要重新渲染才显示
  2. 如果为添加、删除按钮绑定点击事件是使用$('.class').click(function() {});这种方式的话,动态添加的元素是无效的,需要使用$('body').on('click', '.class', function() {})的方式绑定事件
layui是一个轻量级的前端UI库,它提供了一个表格组件(Table)用于展示数据。如果你想在layuiTable添加日期类型的编辑行,你可以按照以下步骤操作: 1. **引入layui和日期插件**: 首先,在HTML文件中引入layui.css和layui.js,以及日期选择插件如laydate.js。 ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> <script src="laydate/laydate.js"></script> ``` 2. **初始化table**: 初始化一个layuitable,并设置列定义,其中包含一个表示日期的列,可以使用`type`属性指定为日期类型。 ```javascript layui.use('table', function () { var table = layui.table; table.render({ elem: '#myTable', // 表格容器ID url: '获取数据的API', // 数据源 cols: [ { field: 'id', title: 'ID', type: 'number' }, { field: 'name', title: '姓名', type: 'text' }, { field: 'date', title: '日期', type: 'date', edit: true } // 设置日期列可编辑 ], methods: { edit: function (row) { // 定义编辑事件处理函数 var laydate = layui.laydate; // 引入laydate实例 laydate.render({ elem: '#' + row.date }); // 为每一行的日期字段绑定 LayDate } } }); }); ``` 3. **编辑事件处理**: 当点击日期列的编辑按钮时,会触发`edit`方法,这里我们绑定了 LayDate 插件,用户可以选择日期并更新到数据库。 4. **保存数据**: 编辑完成后,需要在表单提交或者点击保存按钮时,将用户选择的日期从 LayDate 的格式转换回数据库所需的格式,并发送到服务器。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值