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

原文：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）、删除一行
支持动态删除一行。

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

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

  <title>利用jquery给指定的table添加一行、删除一行</title>

  <meta http-equiv="pragma" content="no-cache">

  <meta http-equiv="cache-control" content="no-cache">

  <meta http-equiv="expires" content="0">

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

  <meta http-equiv="description" content="This is my page">

  <script type="text/javascript"

   src="<%=request.getContextPath()%>/js/jquery-1.5.1.js"></script>

  <script type="text/javascript">

  ////////添加一行、删除一行封装方法///////

  /**

   * 为table指定行添加一行

   *

   * tab 表id

   * row 行数，如：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=$("#"+tab+" tr").eq(row);

     if($tr.size()==0){

        alert("指定的table id或行数不存在！");

        return;

     }

     $tr.after(trHtml);

  }

  function delTr(ckb){

     //获取选中的复选框，然后循环遍历删除

     var ckbs=$("input[name="+ckb+"]:checked");

     if(ckbs.size()==0){

        alert("要删除指定行，需选中要删除的行！");

        return;

     }

           ckbs.each(function(){

              $(this).parent().parent().remove();

           });

  }

  /**

   * 全选

   *

   * allCkb 全选复选框的id

   * items 复选框的name

   */

  function allCheck(allCkb, items){

   $("#"+allCkb).click(function(){

      $('[name='+items+']:checkbox').attr("checked", this.checked );

   });

  }

  ////////添加一行、删除一行测试方法///////

  $(function(){

   //全选

   allCheck("allCkb", "ckb");

  });

  function addTr2(tab, row){

    var trHtml="<tr align='center'><td width='30%'><input type='checkbox' name='ckb'/></td><td width='30%'>地理</td><td width='30%'>60</td></tr>";

    addTr(tab, row, trHtml);

  }

  function delTr2(){

     delTr('ckb');

  }

  </script>

 </head>

 <body>

  <table border="1px #ooo" id="tab" cellpadding="0"

   cellspacing="0" width="30%">

   <tr align="center">

       <td width="30%"><input id="allCkb" type="checkbox"/></td>

    <td width="30%">科目</td>

    <td width="30%">成绩</td>

   </tr>

   <tr align="center">

       <td width="30%"></td>

    <td width="30%">语文</td>

    <td width="30%">80</td>

   </tr>

  </table>

  <input type="button" onclick="addTr2('tab', -1)" value="添加">

     <input type="button" onclick="delTr2()" value="删除">

 </body>

</html>

JQuery实现的动态Table（转）的更多相关文章

  1. 利用jquery给指定的table动态添加一行、删除一行

    转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...

  2. 利用jquery给指定的table动态添加一行、删除一行，复制，值不重复等操作

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

  3. JS、JQuery和ExtJs动态创建DOM对象

    做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...

  4. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  5. 【Jquery mobile】动态加载ListView 转

    [Jquery mobile]动态加载ListView 分类: Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报 jquerylistviewmob ...

  6. Jquery Ajax 异步设置Table中某列的值

    可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

  7. jquery slideDown slideUp 对于table无效

    jquery slideDown slideUp 对于table无效,需要在table外面套一层div才可以使用

  8. jQuery on()绑定动态元素出现的问题小结

    jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友 ...

  9. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 运行时报错 ADB server didn’t ACK

    查看进程中所有和ADB有关的进程,全都结束了,包括什么豌豆荚之类的(大多数情况是占用端口),之后重新启动Eclipse.

  2. UVa 10106 Product

    高精度乘法问题,WA了两次是因为没有考虑结果为0的情况.  Product  The Problem The problem is to multiply two integers X, Y. (0& ...

  3. HDU 3433 (DP + 二分) A Task Process

    题意: 有n个员工,每个员工完成一件A任务和一件B任务的时间给出,问要完成x件A任务y件B任务所需的最短时间是多少 思路: DP + 二分我也是第一次见到,这个我只能说太难想了,根本想不到. dp[i ...

  4. 51nod1586 约数和

    果然我自己写的读入优化naive!...换题目给的读入优化就A了...话说用visual交快了好多啊... const int BufferSize=1<<16; char buffer[ ...

  5. #define | enum(enumerator)

    /**************************************************************************** * #define | enum(enume ...

  6. JVM——判断对象的死活

    一.引用计数法 给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1,当引用失效时,计数器值就减1,任何时刻计数器为0的对象就是不可能再被使用的. 但是它很难解决对象之间相互循环引用的问 ...

  7. Notify通知

    1.NotificationManager类对象         <1>getSystemService(Context.NOTIFICATION_SERVICE) 获取通知管理对象   ...

  8. RequireJS入门（二） 转

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...

  9. C#循环声明一个类

    宗旨就是把实例化的类循环放到字典里面 Dictionary<string, Data> dic = new Dictionary<string, Data>(); ; i &l ...

  10. 用vs2012的命令利用xsd文件生成对应的C#类，把xml的string类型映射到生成的类

    输入命令: xsd d:\TDDOWNLOAD\atom-author-link.xsd /c /language:C# /outputdir:d:\ 含义: 将d:\TDDOWNLOAD\atom- ...