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

原文：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. 彻底搞清javascript中this, constructor, prototype

    说起这三个属性,肯定有一些同学和我一样,初学js时非常困惑,头大,一脸的迷茫.今天就来给大家彻底解决这些担心受怕的问题. 先看this this定义: this就是函数赖以执行的对象. 分析这句话: ...

  2. ionic2rc版常见的一些坑

    1.config.xml里的包名不能有横杠,否则在build android的时候会报错 <widget id="com.ionicframework.name-abc" v ...

  3. POJ 3225 (线段树 区间更新) Help with Intervals

    这道题搞了好久,其实坑点挺多.. 网上找了许多题解,发现思路其实都差不多,所以就不在重复了. 推荐一篇比较好的题解,请戳这. 另外,如果因为可能要更新多次,但最终查询只需要一次,所以没有写pushup ...

  4. o4.数组指针和指针数组的区别

    ------- android培训.iOS培训.期待与您交流! ---------- 我们看一下数组指针和指针数组: 数组指针(也称行指针)定义 int (*p)[n];()优先级高,首先说明p是一个 ...

  5. 使用Phalcon开发工具碰到的数据库问题"Table 'XXX' doesn't exist in database when dumping meta-data for XXX"

    使用Phalcon开发工具,通过命令行生成程序框架 设置好config.php,在对数据库进行读取.保存数据的时候出现了问题“Table 'XXX' doesn't exist in database ...

  6. OGNL valueStack StackContext(ActionContext)深入分析(转+个人理解)

    //还会补充 首先要有一个意识 ,为什么要了解这个?: struts2中的表单是怎么通过表达式(EL or OGNL)来传给Action 和 拿到Action的值的. 值栈(根)对象也可以直接使用EL ...

  7. 选择符优先级-----:link伪类

    问题:请指出以下结构中,A标签内的字体颜色. <style> a{ color:#ccc}/* 灰色 */ .alink a{color:#F60}/* 橙色 */ h1 a{color: ...

  8. 【解题报告】PKU 2318 TOYS AND PKU 2398 Toy Storage

    题目连接: http://poj.org/problem?id=2318     http://poj.org/problem?id=2398 两题类似的题目,2398是2318的升级版. 题目大概是 ...

  9. MatrixTurn源码阅读

    在看cacheAsBitmap 相关资料时,找到bit101的一篇文章,http://www.bytearray.org/?p=290 全文如下: One of the feature I would ...

  10. PPTP模式跟L2TP模式有什么不同

    使用VPN的时候经常会看到商家说支持PPTP模式和L2TP模式,但是许多朋友都不知道有什么区别,该用哪一个,下面给你们讲讲: 1).PPTP协议是点对点隧道协议:其将控制包与数据包分开,控制包采用TC ...