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

原文：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. request.getRequestDispatcher()和response.sendRedirect()

    request.getRequestDispatcher("/homeMainAction_mainUI.do").forward(getRequest(), getRespons ...

  2. iso中第三方框架SDWebImage的使用步骤

    一.SDWebImage的使用 1.依赖的框架 * ImageIO.framework * MapKit.framework 2.UIImageView下载图片需要的头文件:UIImageView+W ...

  3. Oracle 11g对大表中添加DEFAULT值的NOT NULL字段速度有大幅度的提升

    在一张2000万的表上增加了一个字段并字段一个默认值,执行这条语句(alter table tablename add new_col default ‘col’)一个小时没有执行完,问我有没有其他解 ...

  4. 【转】在Source Insight中看Python代码

    原文网址:http://www.cnblogs.com/xuxm2007/archive/2010/09/02/1815695.html SI是个很强大的代码查看修改工具,以前用来看C,C++都是相当 ...

  5. ORACLE RAC 下非缺省端口监听配置(listener.ora tnsnames.ora)

    不论是单实例还是RAC,对于非缺省端口下(1521)的监听器,pmon进程不会将service/instance注册到监听器,即不会实现动态注册.与单实例相同,RAC非缺省端口的监听器也是通过设置参数 ...

  6. 写python时加入缩进设置

    发现如果用vim写python的时候,还是设成8好像会报错,在现有的基础上,加入下面设置就好了set shiftwidth=4

  7. selenium python （十五）控制滚动条操作

    #!/usr/bin/python# -*- coding: utf-8 -*-__author__ = 'zuoanvip' #一般用到操作滚动条的两个场景    #注册时的法律条文的阅读,判断用户 ...

  8. LoadRunner界面分析（二）

    1.Controller 2.创建运行场景 3.方案设计 4.Resuls settting 5.监视方案

  9. jquery checkbox勾选取消勾选的诡异问题

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type=&q ...

  10. JQuery中的事件以及动画

    .bind事件 <script src="script/jquery-1.7.1.min.js"></script> <script> $(fu ...