jQuery实现表格行的动态增加与删除

删除之前

删除2行后:

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3<head>
 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5<script type="text/javascript" src="jquery-1.3.1.js"></script>
 6<title></title>
 7<script>
 8    $(document).ready(function(){
 9        //<tr/>居中
10        $("#tab tr").attr("align","center");
11
12        //增加<tr/>
13        $("#but").click(function(){
14            var _len = $("#tab tr").length;
15            $("#tab").append("<tr id="+_len+" align=‘center‘>"
16                                +"<td>"+_len+"</td>"
17                                +"<td>Dynamic TR"+_len+"</td>"
18                                +"<td><input type=‘text‘ name=‘desc"+_len+"‘ id=‘desc"+_len+"‘ /></td>"
19                                +"<td><a href=\‘#\‘ onclick=\‘deltr("+_len+")\‘>删除</a></td>"
20                            +"</tr>");
21        })
22    })
23
24    //删除<tr/>
25    var deltr =function(index)
26    {
27        var _len = $("#tab tr").length;
28        $("tr[id=‘"+index+"‘]").remove();//删除当前行
29        for(var i=index+1,j=_len;i<j;i++)
30        {
31            var nextTxtVal = $("#desc"+i).val();
32            $("tr[id=\‘"+i+"\‘]")
33                .replaceWith("<tr id="+(i-1)+" align=‘center‘>"
34                                +"<td>"+(i-1)+"</td>"
35                                +"<td>Dynamic TR"+(i-1)+"</td>"
36                                +"<td><input type=‘text‘ name=‘desc"+(i-1)+"‘ value=‘"+nextTxtVal+"‘ id=‘desc"+(i-1)+"‘/></td>"
37                                +"<td><a href=\‘#\‘ onclick=\‘deltr("+(i-1)+")\‘>删除</a></td>"
38                            +"</tr>");
39        }
40
41    }
42</script>
43</head>
44<body>
45
46    <table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
47        <tr>
48            <td width="20%">序号</td>
49            <td>标题</td>
50            <td>描述</td>
51            <td>操作</td>
52       </tr>
53    </table>
54    <div style="border:2px;
55                border-color:#00CC00;
56                margin-left:20%;
57                margin-top:20px">
58        <input type="button" id="but" value="增加"/>
59    </div>
60</body>
61</html>
62
时间: 2024-11-07 06:37:29

jQuery实现表格行的动态增加与删除的相关文章

jQuery实现表格行的动态增加与删除 序号 从 1开始排列

<table id="tab" border="1" width="60%" align="center" style="margin-top:20px"> <tr> <td width="20%">序</td> <td >标题</td> <td >描述</td> <td >操作&

jquery动态增加或删除tr和td【实际项目】

难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每天tr中的tr中name='对象[index].属性',必须有下标且下标要从0开始且要连续不能跳跃 (4)增加tr和td需要学习细节有: 创建td   var $tdName = $("<td class='in-ctt'></td>"); td添加内容   $td

js实现表格行的动态添加------Day56

现代页面通常都是用div+css来进行设计,几乎很少再有用table来进行布局的了,但是这并不意味着table的重要性就降低了,事实上,table在数据处理上有着它独特的优势,所以对table的掌握还是很有必要的. 我们首先要记录的问题是:js动态的添加表格的行和列 我们先给定一个table,先用html语言编写下: <table width="100%" height="300px" border="1px" id="tad&q

jquery更改表格行顺序实例

使用jquery写的更改表格行顺序的小功能表格部分: 复制代码代码如下: <table class="table" id="test_table">  < thead> < tr>  < th>时间</th> < th>详情</th>  < th>操作</th> < /tr>  < /thead> < tbody> <

开机状态下,动态增加与删除SCSI磁盘

开机状态下,SCSI磁盘动态增加与删除命令如下,已经在虚拟机opensuse15.1与物理机centos7.3上测试通过. 删除磁盘命令: echo 1 > /sys/block/sda/device/delete    //sda可以是任何SCSI设备 增加磁盘命令: echo "- - -">/sys/class/scsi_host/host0/scan   //其中host0为磁盘所在的adapter名称 原文地址:https://www.cnblogs.com/lo

JQuery实现表格行的上移、下移、删除、增加

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getSer

hdfs以及hbase动态增加和删除节点

一个知乎上的问题:Hbase的Region server和hadoop的datanode是否可以部署在一台服务器上?如果是的话,二者是否是一对一的关系?部署在同一台服务器上,可以减少数据跨网络传输的流量. 但不是一对一对的关系,首先,数据还hdfs中保存N份,默认是三分,也就是说数据会分布在三个datanode上,即使regionserver上只保存一个region,它也可以与三个datanode交互,更何况,一台regionserver可以保存多个region. 参考:https://www.

动态增加,删除表格行并按照表格列排序

接着上一篇博文,解决上一篇博文最后遗留的瑕疵,同时,给表格列添加了排序功能. 解决掉的问题 1 乱码的问题 2 删除方法更加简便,省去获取父节点id的代码 3 点击第一行的add按钮后,下行table行变宽问题 <html> <head> <title>Table</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"&g

jquery为表格行添加上下移动画效果

为项目列表项添加上下移动动画.首先想使用jquery animate来做到这一点.但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations are not supported on table rows.).所以设法用其他解决方案.最后使用jq方法配合 CSS3 transform 实现. /** * @param {Object} $fstElem 目标行 * @param {Object} $scdElem 被换行 * @param {