jquery动态增加删减表格行特效

基于jQuery表格增加删除代码是一款动态增加删减表格行特效代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

具体代码如下:

html代码:

<div style="width:720px;margin:20px auto;">
   <table id="tab11" style="display: none">
     <tbody>
       <tr>
         <td height="30" align="center">
           <input type="text" name="NO" size="2" value="1" />
         </td>
         <td align="center">
           <input type="text" name="start_end_time" />
         </td>
         <td align="center">
           <input type="text" name="unit_department" />
         </td>
         <td align="center">
           <input type="text" name="post" />
         </td>
         <td>
           <input type="button" id="Button1" onclick="deltr(this)" value="删行" />
         </td>
       </tr>
     </tbody>
   </table>
   <input type="button" id="btn_addtr" value="增行" />
   <table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">
     <thead>
       <tr>
         <td height="30" align="center" bgcolor="#CCCCCC">ID</td>
         <td align="center" bgcolor="#CCCCCC">起止时间</td>
         <td align="center" bgcolor="#CCCCCC">单位/部门</td>
         <td align="center" bgcolor="#CCCCCC">职位</td>
         <td></td>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td height="30" align="center">
           <input type="text" name="NO" size="2" value="1" />
         </td>
         <td align="center">
           <input type="text" name="start_end_time" />
         </td>
         <td align="center">
           <input type="text" name="unit_department" />
         </td>
         <td align="center">
           <input type="text" name="post" />
         </td>
         <td>
           <input type="button" id="Button2" onclick="deltr(this)" value="删行" />
         </td>
       </tr>
     </tbody>
   </table>
 </div>

js代码:

$(function () {
      var show_count = 20;  //要显示的条数
      var count = 1;  //递增的开始值,这里是你的ID
      $("#btn_addtr").click(function () {

        var length = $("#dynamicTable tbody tr").length;
        //alert(length);
        if (length < show_count)  //点击时候,如果当前的数字小于递增结束的条件
        {
          $("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody");  //在表格后面添加一行
          changeIndex();//更新行号
        }
      });

    });
    function changeIndex() {
      var i = 1;
      $("#dynamicTable tbody tr").each(function () { //循环tab tbody下的tr
        $(this).find("input[name='NO']").val(i++);//更新行号
      });
    }

    function deltr(opp) {
      var length = $("#dynamicTable tbody tr").length;
      //alert(length);
      if (length <= 1) {
        alert("至少保留一行");
      } else {
        $(opp).parent().parent().remove();//移除当前行
        changeIndex();
      }
    }

希望本文所述对大家学习javascript成程序设计有所帮助。

时间: 2015-11-19

Jquery 动态循环输出表格具体方法

实现功能:1.有一个同学叫我实现一个这样的功能就像PHP,在表单中输入数字,然后网页就出现相应的数量:如果是PHP的话就简单多了,Jquery实现还是第一个,就开始狂的实验,最后还是实现了(知识点:Jquery创建节点.获取表单的值.循环语句)Jquery代码: 复制代码 代码如下: <script type="text/javascript" language="javascript">$(function(){$("#btn").

jQuery实现表格行和列的动态添加与删除方法【测试可用】

本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

jQuery实现html表格动态添加新行的方法

本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

JQuery实现表格动态增加行并对新行添加事件

实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并绑定timepicker 三:表2自动增加行,新行绑定timepicker HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

Jquery 动态生成表格示例代码

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

JQuery实现动态表格点击按钮表格增加一行

功能实现:点击添加按钮,表格增加一行并给其name属性赋予的值,方便获取 点击删除,自动删除这一行 JQuery中定义一个count变量 var count = 1; function add() { var tbl = document.all.ci; var rows = tbl.rows.length; var tr = tbl.insertRow(rows); var e_id = tr.insertCell(0); e_id.innerHTML = '<input type="t

JQuery Ajax动态生成Table表格

前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q

jquery动态增加删除表格行的小例子

复制代码 代码如下: <script src="jquery/jquery-1.3.1.js"></script><style type="text/css">body{background:#FFFFFF;}</style></head><body><script> $(function(){ var show_count = 20;   //要显示的条数 var count =

原生JS和JQuery动态添加、删除表格行的方法

本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

JQuery动态添加和删除表格行的方法

本文实例讲述了JQuery动态添加和删除表格行的方法.分享给大家供大家参考.具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery.用它实现起来还真的是很方便,这个是我用到我们平台的一个方法. 复制代码 代码如下: //记录添加行数 var areaCount=1; //记录实际表格行数 var rowCount=1; //删除模板html var delRowTemplete = "<td><a href='javascript:voi

jQuery动态添加与删除tr行实例代码

这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子 下面是实现的样子,当然没有样式: 点击添加按钮可以添加一行: 点击删除可以删除本行: 基本功能是这样,下面是代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 这里是引用了一个百度的jquery库,可换为本地jquery

jQuery实现的简单动态添加、删除表格功能示例

本文实例讲述了jQuery实现的简单动态添加.删除表格功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 我们</title> <style> * { padding: 0; margin: 0;

Jquery动态添加及删除页面节点元素示例代码

通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo

jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d

js实现对table动态添加、删除和更新的方法

本文实例讲述了js实现对table动态添加.删除和更新的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999

jquery动态添加文本并获取值的方法

实例如下: $(function() { var i = 1; $('#addText').click(function() { if (i < 9) { $('#main').append('<div><input type="text" name="text" + i + ""/> <a href="#" mce_href="#" class="del-te

JQuery动态添加Select的Option元素实现方法

如下所示: var selector=$('<select></select>'); for(var i=0;i<5;i++){ selector.append('<option value="'+i+'">'+i+'</option>'); } 以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

Vue 实现列表动态添加和删除的两种方法小结

下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - vue实现列表增加和删除</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script&g