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

原文：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. Android应用更新升级实现

    介绍 在产品的开发中,android升级提示,下载更新是必备的功能,否则等用户被动去官方网,或者第三方商店提示,就为时已晚了. 原理 在用户每次打开应用的时候,都与服务器进行一次交互,获取版本信息,对 ...

  2. String.indexOf()

    int indexOf(int ch) 返回指定字符在此字符串中第一次出现处的索引. int indexOf(int ch, int fromIndex) 从指定的索引开始搜索,返回在此字符串中第一次 ...

  3. UVa 10361 Automatic Poetry

    Automatic Poetry Input: standard input Output: standard output Time Limit: 2 seconds Memory Limit: 3 ...

  4. codeforces 431 B Shower Line【暴力】

    题意:给出五个人的编号,分别为 1 2 3 4 5,他们在排队, 最开始的时候,1和2可以交谈,3和4可以交谈 然后1走了之后,2和3交谈,4和5可以交谈 2走了之后,3和4可以交谈, 3走了之后,4 ...

  5. OpenStack (1) - Keystone OpenStack Identity Service

    echo deb http://ubuntu-cloud.archive.canonical.com/ubuntu precise-updates/grizzly main >> /etc ...

  6. 韦东山驱动视频笔记——3.字符设备驱动程序之poll机制

    linux内核版本:linux-2.6.30.4 目的:我们在中断方式的按键应用程序中,如果没有按键按下,read就会永远在那等待,所以如果在这个程序里还想做其他事就不可能了.因此我们这次改进它,让它 ...

  7. HDU 5327 Olympiad （水题）

    题意:beautiful数字定义为该数字中的十进制形式每一位都不同,给一个区间[L,R],求该区间中有多少个beautiful数字. 思路:数字不大,直接暴力预处理,再统计区间[1,i]有多少个,用c ...

  8. Asp.net动态调用WebService

    Public Class WebServiceHelper #Region "InvokeWebService" '动态调用web服务 Public Shared Function ...

  9. mysql同步 小问题

    由于历史遗留问题,我们的MySQL主从库的表结构不一致,主库的某个表tableA比从库表tableA少了一个字段. 当尝试在主库上更改表结构时,这行alter语句会随着binlog同步到从库,如果从库 ...

  10. Android RecyclerView使用详解（三）

    在上一篇(RecyclerView使用详解(二))文章中介绍了RecyclerView的多Item布局实现,接下来要来讲讲RecyclerView的Cursor实现,相较于之前的实现,Cursor有更 ...