转自：http://www.cnblogs.com/linjiqin/p/3148181.html

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

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

需求场景

1）、添加一行

支持在任意行添加一行且可配置的，如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行，随需求的变化都不会影响。

前提条件：行数需在表中存在否则添加不成功。

2）、删除一行

支持动态删除一行。

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

1、原始界面如下：

2、添加一行，如要添加一行需点击“添加”按钮，现点击两下会自动添加两行，效果如下截图：

3、删除一行，如要删除指定行，先要选中行然后在点击“删除”按钮进行删除(这不是废话嘛~~~)，现选中一行，效果如下截图：

4、对选中行进行删除，现点击“删除”按钮就会把选中的行删除掉，效果如下截图：

代码如下：

<%@ 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动态添加一行、删除一行，复制，值不重复等操作

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

  2. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  3. 利用jquery动态添加和删除表格的一行，并且保存单行数据

    开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...

  4. ASP.NET给Table动态添加删除行，并且得到控件的值

    ASP.NET给Table动态添加控件并且得到控件的值 由于跟老师做一个小的项目,可是我自己又不太懂js,所以一直为动态建立表格并且能动态的取值和赋值感到苦恼.起初在网上找到了一些js资源,解决了动态 ...

  5. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  6. 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  7. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  8. js动态添加和删除标签

    html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead& ...

  9. 在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接

    查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...

随机推荐

  1. 如何在CentOS 7服务器上安装NodeJS

    你可以通过运行以下命令. 1 sudo yum install epel-release 现在可以使用yum命令安装Node.js了. 1 sudo yum install nodejs 因为在开发过 ...

  2. javascript中parentNode,childNodes,children的应用详解

    本篇文章是对javascript中parentNode,childNodes,children的应用进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助   "parentNode&qu ...

  3. Tomcat ClassLoader机制介绍

    本文旨在介绍JVM的类加载机制:同时分析Tomcat不能采用默认的加载机制的原因,并对其加载机制做了介绍. 1.JVM中的类加载机制 在Java2之后的版本中,类的加载采用的是一种称为双亲委派的代理模 ...

  4. DCMTK3.6.0 (MT支持库)安装 完整说明

    环境WIN7 + VisualStudio2010 + dcmtk3.6.0 + Cmake2.8.6 准备工作: 从dcmtk官方网站下载源代码及支持库文件.分别名为:dcmtk-3.6.0 dcm ...

  5. HDU1711

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  6. Linux 面试题总结

    一. 填空题1. 在Linux系统中,以 (文件) 方式访问设备 .2. Linux内核引导时,从文件 (/etc/fstab) 中读取要加载的文件系统.3. Linux文件系统中每个文件用 (索引节 ...

  7. php远程抓取网站图片并保存

    以前看到网上别人说写程序抓取网页图片的,感觉挺神奇,心想什么时候我自己也写一个抓取图片的方法! 刚好这两天没什么事,就参考了网上一个php抓取图片代码,重点借鉴了 匹配img标签和其src属性正则的写 ...

  8. JQuery $(function(){})和$(document).ready(function(){})

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)二是onload,指 ...

  9. JavaScript 在页面上显示数字时钟

    显示一个钟表 拓展JavaScript计时:http://www.w3school.com.cn/js/js_timing.asp setTimeout() 方法会返回某个值.在下面的语句中,值被储存 ...

  10. C++ traits

    [本文链接] http://www.cnblogs.com/hellogiser/p/cplusplus-traits.html [分析] 什么是traits?其实它并不是一个新的概念,上个世纪90年 ...