热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JQuery实现的动态Table(转)

这个例子做的不错,转载备份。原文:http:www.cnblogs.comlinjiqinarchive201306213148181.html$(#

这个例子做的不错,转载备份。

原文:http://www.cnblogs.com/linjiqin/archive/2013/06/21/3148181.html

$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列
$("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列

 

今天在项目中,刚好用到给指定的table添加一行、删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,如有问题欢迎大伙拍砖指正,千万可别人身攻击,嘎嘎。。。

 

需求场景

1)、添加一行
支持在任意行添加一行且可配置的,如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行,随需求的变化都不会影响。
前提条件:行数需在表中存在否则添加不成功。

 

2)、删除一行
支持动态删除一行。

先演示结果,如中意了在好好研究代码。

<%&#64; page language&#61;"java" pageEncoding&#61;"UTF-8"%>DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>利用jquery给指定的table添加一行、删除一行title><meta http-equiv&#61;"pragma" content&#61;"no-cache"><meta http-equiv&#61;"cache-control" content&#61;"no-cache"><meta http-equiv&#61;"expires" content&#61;"0"><meta http-equiv&#61;"keywords" content&#61;"keyword1,keyword2,keyword3"><meta http-equiv&#61;"description" content&#61;"This is my page"><script type&#61;"text/Javascript"src&#61;"<%&#61;request.getContextPath()%>/js/jquery-1.5.1.js">script><script type&#61;"text/Javascript">////添加一行、删除一行封装方法////*** 为table指定行添加一行** tab 表id* row 行数&#xff0c;如&#xff1a;0->第一行 1->第二行 -2->倒数第二行 -1->最后一行* trHtml 添加行的html代码**/function addTr(tab, row, trHtml){//获取table最后一行 $("#tab tr:last")//获取table第一行 $("#tab tr").eq(0)//获取table倒数第二行 $("#tab tr").eq(-2)var $tr&#61;$("#"&#43;tab&#43;" tr").eq(row);if($tr.size()&#61;&#61;0){alert("指定的table id或行数不存在&#xff01;");return;}$tr.after(trHtml);}function delTr(ckb){//获取选中的复选框&#xff0c;然后循环遍历删除var ckbs&#61;$("input[name&#61;"&#43;ckb&#43;"]:checked");if(ckbs.size()&#61;&#61;0){alert("要删除指定行&#xff0c;需选中要删除的行&#xff01;");return;}ckbs.each(function(){$(this).parent().parent().remove();});}/*** 全选* * allCkb 全选复选框的id* items 复选框的name*/function allCheck(allCkb, items){$("#"&#43;allCkb).click(function(){$(&#39;[name&#61;&#39;&#43;items&#43;&#39;]:checkbox&#39;).attr("checked", this.checked );});}////添加一行、删除一行测试方法///
$(function(){//全选
allCheck("allCkb", "ckb");});function addTr2(tab, row){var trHtml&#61;"地理60";addTr(tab, row, trHtml);}function delTr2(){delTr(&#39;ckb&#39;);}script>head><body><table border&#61;"1px #ooo" id&#61;"tab" cellpadding&#61;"0"cellspacing&#61;"0" width&#61;"30%"><tr align&#61;"center"><td width&#61;"30%"><input id&#61;"allCkb" type&#61;"checkbox"/>td><td width&#61;"30%">科目td><td width&#61;"30%">成绩td>tr><tr align&#61;"center"><td width&#61;"30%">td><td width&#61;"30%">语文td><td width&#61;"30%">80td> tr>table><input type&#61;"button" onclick&#61;"addTr2(&#39;tab&#39;, -1)" value&#61;"添加"><input type&#61;"button" onclick&#61;"delTr2()" value&#61;"删除">body>
html>

 

转:https://www.cnblogs.com/rulian/p/5628835.html



推荐阅读
author-avatar
终渐疯分_501
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有