利用jquery实现动态表格的相关操作以及列表全选功能

最新推荐文章于 2022-10-11 18:14:17 发布

E1ffC1

最新推荐文章于 2022-10-11 18:14:17 发布

阅读量1.5k

点赞数

分类专栏： jquery 文章标签： jquery dom 动态表格

本文链接：https://blog.csdn.net/qq_37176126/article/details/73263837

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

通过jquery来，动态创建表格，增加，以及删除某一行，以及全选，取消全选，删除选中行等操作，加强jquery 操作dom 对象的能力

页面代码

<body>
<h2 align="center">jquery 实现动态表格的创建及列表全选等操作</h2>
<div align="center">
编号：<input id="tId" type="text" />
名称：<input id="name" type="text" />
价格：<input id="price" type="text" />
<input id="add" type="button" value="添加" />
<br />
<br />
</div>
<table id="tab" width="80%" align="center" cellspacing="0" border="1" bordercolor="#a0c6e5">
	<tbody id="tbody">
		<tr align="center">
			<td><input type="checkbox" /></td>
			<td>编号</td>
			<td>名称</td>
			<td>价格</td>
			<td>操作</td>
		</tr>
		<tr align="center">
			<td><input type="checkbox" /></td>
			<td>001</td>
			<td>java</td>
			<td>36.5</td>
			<td><input type="button" value="delete"></td>
		</tr>
	</tbody>
</table>
<br>
<br>

<div align="center">
<input id="selectAll" type="button" value="全选" />
<input id="cancelSelect" type="button" value="取消选中" />
<input id="deleteSelect" type="button" value="删除选中" />
<br />
<br />
</div>
</body>

js 代码

<script type="text/javascript" src="./js/jquery-1.6.4.js"></script>
<script type="text/javascript">
	$(function(){
		$("#add").click(function(){ //为 按钮添加事件
			//获取值
			var tId = $("#tId").val();
			var name = $("#name").val();
			var price = $("#price").val();
			
			// 创建 td 对象 并将相应的值插入
			var cbTd = $("<td><input type='checkbox' /></td>");
			var idTd = $("<td></td>").text(tId);
			var nameTd = $("<td></td>").text(name);
			var priceTd = $("<td></td>").append(price);
			var acTd = $("<td><input type='button' value='delete' /></td>");
			
			//创建 tr 对象将td 对象放入 tr, 再将tr 加入 tbody
			var tr = $("<tr></tr>").append(cbTd).append(idTd).append(nameTd).append(priceTd).append(acTd).attr("align","center");
			$("#tbody").append(tr);
		});
		
		//对 每个删除按钮绑定 删除事件
		//  这种 将一组 对象 后加 click 事件，只能将原有的 对象绑定上 事件， 新添加的绑定不了 需要 使用 live/on 方法
		/*  
		$("input[value='delete']").click(function(){
			$(this).parent().parent().remove(); 
		 });
		*/
		//  js 1.9 已经将 live 换位 on
		 $("input[value='delete']").live("click",function(){
				$(this).parent().parent().remove();
			});
		
		//全选
		$("#selectAll").click(function(){
			$("input[type='checkbox']").attr("checked",true);
		});
		
		//取消全选
		$("#cancelSelect").click(function(){
			$("input[type='checkbox']:checked").attr("checked",false);
		});
		
		//删除选中
		/* 1.
		$("#deleteSelect").click(function(){
			$("input[type='checkbox']:checked").parent().parent().remove();
		});
		*/
		//2. 遍历
		$("#deleteSelect").click(function(){
			var chks = $("input[type='checkbox']:checked");
			$.each(chks,function(i,ck){
				$(ck).parent().parent().remove();
			})
		});
	});
</script>

效果图：

E1ffC1

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
利用jquery实现动态表格的相关操作以及列表全选功能

通过jquery来，动态创建表格，增加，以及删除某一行，以及全选，取消全选，删除选中行等操作，加强jquery 操作dom 对象的能力页面代码jquery 实现动态表格的创建及列表全选等操作编号：名称：价格：编号名称价格操作 001 java 36.5
复制链接

扫一扫