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 >操作</td>
</tr>
</table>
<div style="border:2px;
border-color:#00CC00;
margin-left:20%;
margin-top:20px">
<input type="button" id="but" value="增加" />
</div>
<script>
$(document).ready(function () {
$("#tab tr").attr("align", "center");
$("#but").click(function () {
var _len = $("#tab tr").length;
$("#tab").append("<tr id=" + _len + " align='center'>"
+ "<td>" + _len + "</td>"
+ "<td>Dynamic TR" + _len + "</td>"
+ "<td><input type='text' name='desc" + _len + "' id='desc" + _len + "' /></td>"
+ "<td><a href=\'#\' onclick=\'deltr(" + _len + ")\'>删除</a></td>"
+ "</tr>");
})
})
//删除<tr/>
var deltr = function (index) {
var _len = $("#tab tr").length;
$("tr[id='" + index + "']").remove();//删除当前行
for (var i = index + 1, j = _len; i < j; i++) {
var nextTxtVal = $("#desc" + i).val();
$("tr[id=\'" + i + "\']")
.replaceWith("<tr id=" + (i - 1) + " align='center'>"
+ "<td>" + (i - 1) + "</td>"
+ "<td>Dynamic TR" + (i - 1) + "</td>"
+ "<td><input type='text' name='desc" + (i - 1) + "' value='" + nextTxtVal + "' id='desc" + (i - 1) + "'/></td>"
+ "<td><a href=\'#\' onclick=\'deltr(" + (i - 1) + ")\'>删除</a></td>"
+ "</tr>");
}
}
</script>
jQuery实现表格行的动态增加与删除 序号 从 1开始排列的更多相关文章
- jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- jQuery实现表格行的动态增加与删除
删除之前删除2行后: 1<script> 8 $(document).ready(function(){ 9 //<tr/>居中 10 $("#tab tr" ...
- jquery实现表格行的动态增加和删除
$("#Addmaterial").click(function () {//Addmaterial是增加按钮的ID $("#tab tr").attr(&qu ...
- jquery动态增加或删除tr和td【实际项目】
难点: (1)动态增加.删除tr和td (2)每天tr和td都有下标,且下标要动态变化, (3)tr和td为什么下标不能随便写,原因是此处需要把所有tr中的数据以list的形式发送到后台对象中,所有每 ...
- jQuery实现表格行上移下移和置顶
jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...
- JQuery实现表格行的上移、下移、删除、增加
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%&g ...
- jquery更改表格行顺序实例
使用jquery写的更改表格行顺序的小功能 表格部分: 复制代码代码如下: <table class="table" id="test_table"> ...
- hdfs以及hbase动态增加和删除节点
一个知乎上的问题:Hbase的Region server和hadoop的datanode是否可以部署在一台服务器上?如果是的话,二者是否是一对一的关系?部署在同一台服务器上,可以减少数据跨网络传输的流 ...
- 使用jquery扩展表格行合并方法探究
1.前言 最近项目中用到一个表格中对于相同内容的数据进行行合并的需求,本来想从网上找个现成的,省的自己再造轮子.于是就开始谷歌了...不过在搜索的过程中,发现找到的工具类很多都有一个前提,就是该表格中 ...
随机推荐
- 一次神奇的WCF的404错误解决
现象:浏览器中可以访问元数据,但是运行的时候却报404的异常,说目标地址找不到. 折腾了一下午. 引用服务后config中的client的address是这样的http://host/aspx/Ser ...
- Cause: org.apache.ibatis.reflection.ReflectionException: Could not set property 'orderdetails' of 'class com.luchao.mybatis.first.po.Orders' with value 'Orderdetail [id=null, ordersId=3, itemsId=1, it
从上面异常的解释来看是因为反射不能将Orders设置到orderdetails属性上,仔细检查了MyBatis的配置文件,发现: <collection property="order ...
- 一步一步教你elasticsearch在windows下的安装
首先下载最新的elasticsearch安装版本:elasticsearch下载.下载最新的elasticsearch 0.90.1版本.下载完成后.解压缩在安装目录.在cmd命令行进入安装目录,再进 ...
- iOS不得姐项目--TabBar的重复点击实现当前模块刷新;状态栏点击实现当前模块回滚到最顶部
一.实现功能:重复点击tabBar,刷新当前TableView,其余不受影响 <1>实现思路: 错误的方法: TabBar成为自己的代理,监听自己的点击--这种方法是不可取的,如果外面设置 ...
- 通过JS实现网站繁体简体互换
html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 【深入Java虚拟机】之二:Java垃圾回收机制
[深入Java虚拟机]之:Java垃圾收集机制 对象引用 Java中的垃圾回收一般是在Java堆中进行,因为堆中几乎存放了Java中所有的对象实例.谈到Java堆中的垃圾回收,自然要谈到引用.在JDK ...
- iOS随机生成数字
有时候我们需要在程序中生成随机数,但是在Objective-c中并没有提供相应的函数,好在C中提供了rand().srand().random().arc4random()几个函数.那么怎么使用呢?下 ...
- 【bzoj3624】Apio2008—免费道路
http://www.lydsy.com/JudgeOnline/problem.php?id=3624 (题目链接) 题意 给出一张无向图,其中有0类边和1类边.问能否构成正好有K条0类边的生成树, ...
- BZOJ2301 [HAOI2011]Problem b
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- Nuget包里的依赖包更新到最新版本会不会随主包回滚到旧包的研究
A包中有几个依赖包:A-1包,版本:>=1.0:但是我项目上已经引用了A-1包的2.0版本,那么我添加A包的时候,不会将A-1包2.0版本改成1.0版本,会直接用2.0版本的.