jQuery 表格实现

<script type="text/javascript">$(function(){/******实现全选的操作****/$("#chks").click(function(){//获得当前框的勾选状态var  flag=  $("#chks").prop("checked");$("input[name='chk']").prop('checked',flag);})/******实现是否全部勾选的效果*****/$("input[name='chk']").click(function(){//获得所有的单个的勾选框var  inps =$("input[name='chk']");/*for(var  i  in  inp){console.log(inp[i]);}*/var  flag=true;inps.each(function(){//循环体if(!$(this).prop('checked')){//证明至少有一个框没有被勾选flag=false;return;	}})$("#chks").prop('checked',flag); 	    })/********实现反选的效果***********/$("#fx").click(function(){var  inps =$("input[name='chk']");inps.each(function(){//当前多选框的状态var  flag=   $(this).prop('checked');$(this).prop("checked",!flag)})	})/*****新增一行数据********/$("#addRow").click(function(){$("#ta").append('<tr>'+'<td><input type="checkbox" name="chk" id="" value="4" /></td>'+'<td>《web开发详解》</td>'+'<td>刘老师</td>'+'<td>30</td>'+'</tr>') 	})/*****移除指定的数据****/$("#delRow").click(function(){//获得所有被选中的多选框var   v =$("input[name='chk']:checked");if(v.length==0){alert("请至少勾选一行数据")}else{//parent()--获得当前节点的父节点v.parent().parent().remove();}})/******赋值行的操作*******/$("#copyRow").click(function(){//获得被勾选的inputvar   v =$("input[name='chk']:checked");if(v.length==0){alert("请至少选择一行进行复制");}else {//赋值一行var  tr=v.parent().parent().clone();//把复制的行黏贴到指定的表格中$("#ta").append(tr)	}  		  })})		</script></head><body><h3>jQuery操作表格</h3><hr /><input type="button" id="fx" value="反选" /><input type="button" id="addRow" value="新增一行" /><input type="button" id="delRow" value="删除行" /><input type="button" id="copyRow" value="复制行" /><table border="1px" cellpadding="10px" cellspacing="0" id="ta"><tr><td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td><td width="200px">书名</td><td width="200px">作者</td><td width="200px">数量</td></tr><tr id=""><td><input type="checkbox" name="chk" id="" value="2"/></td><td>《Java编程之道》</td><td>wollo</td><td>10</td></tr><tr><td><input type="checkbox" name="chk" id="" value="3" /></td><td>《Python和我的故事》</td><td>赵老师</td><td>10</td></tr><tr><td><input type="checkbox" name="chk" id="" value="4" /></td><td>《web开发详解》</td><td>张老师</td><td>30</td></tr>			</table>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/324958.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

jQuery 表格实现

相关文章

来吧学学.Net Core之项目文件简介及配置文件与IOC的使用

真正的问题应该在我身上……

搞定计算机网络面试，看这篇就够了

来吧学学.Net Core之登录认证与跨域资源使用

ssl1760-商店选址问题【图论，最短路】

JSP 获得服务器时间和浏览器时间

如果要你选择某读书APP的图标，你会选择哪一个？

从理论知识到落地能力，你欠缺了什么？

三大特性之多态性

在这里，我们为您绘制了专属海报，请您查收！

ssl1761-城市问题【图论，最短路，Dijkstra】

10分钟就能学会的.NET Core配置

String 使用不当可能导致内存泄露

instanceof关键字

王宝兴同学谈学习！

ssl1614-医院设置【图论，最短路】

.NET Core运行时和基础类库性能提升

JSP 统计网站访问人数

阿里巴巴宣布开源限流降级中间件——Sentinel

张君豪同学谈学习