jquery实现添加和删除行数据

这篇博客介绍了如何在HTML页面中利用jQuery实现表格行的动态添加与删除功能。首先,博主创建了一个HTML文件,并引入了jQuery库。接着展示了运行效果,包括‘添加’和‘删除’操作。最后,博主确认测试已经完成。
摘要由CSDN通过智能技术生成

首先创建html文件 将 jquery 文件引入 html中

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<style>
			body{
   
				margin:0 auto;
				padding: 0;
			}
			tr:nth-child(odd){
   
				background-color: aquamarine;
				
			}
			tr
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui数据表格的添加删除可以通过以下步骤实现: 1. 添加:通过表格的render方法中的done回调函数,在表格渲染完成后,可以通过jQuery或原生JavaScript等方式,向表格中添加数据。 2. 删除:通过表格的on方法,监听删除按钮的点击事件,获取当前数据,然后通过jQuery或原生JavaScript等方式,将该数据从表格中删除。 具体实现可以参考以下代码示例: 添加: ```javascript // 渲染表格 table.render({ // ... done: function (res, curr, count) { // 在表格渲染完成后,添加数据 var newRowData = {id: 4, name: '张三', age: 22, sex: '男'}; var $tbody = $('#demo').next('.layui-table-box').find('.layui-table-body tbody'); var trHtml = '<tr data-index="' + (count++) + '">'; trHtml += '<td data-field="id"><div class="layui-table-cell laytable-cell-1-id">' + newRowData.id + '</div></td>'; trHtml += '<td data-field="name"><div class="layui-table-cell laytable-cell-1-name">' + newRowData.name + '</div></td>'; trHtml += '<td data-field="age"><div class="layui-table-cell laytable-cell-1-age">' + newRowData.age + '</div></td>'; trHtml += '<td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">' + newRowData.sex + '</div></td>'; trHtml += '</tr>'; $tbody.append(trHtml); } }); ``` 删除: ```javascript // 监听删除按钮的点击事件 table.on('tool(test)', function (obj) { if (obj.event === 'delete') { // 获取当前数据 var rowData = obj.data; // 通过jQuery或原生JavaScript等方式,将该数据从表格中删除 obj.del(); } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值