蜗小牛
- 浏览: 60259 次
- 性别:
- 来自: 大连
-
文章分类
最新评论
<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<title></title>
<script>
$(document).ready(function(){
//<tr/>居中
$("#tab tr").attr("align","center");
//增加<tr/>
$("#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>
</head>
<body>
<table id="tab" border="1" width="80%" align="center" style="margin-top:40px">
<tr>
<td width="30%">序号</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>
</body>
</html>
本文转自：http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<title></title>
<script>
$(document).ready(function(){
//<tr/>居中
$("#tab tr").attr("align","center");
//增加<tr/>
$("#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>
</head>
<body>
<table id="tab" border="1" width="80%" align="center" style="margin-top:40px">
<tr>
<td width="30%">序号</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>
</body>
</html>
本文转自：http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html
分享到：
发表评论
-
CSS3伪类选择器
2014-04-18 09:32 563CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1011script代码： <script type=" ... -
html之marquee详解
2014-03-28 10:07 601该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 18431。html中a标签的四个属性书写是有顺序的，如果顺序不对，显 ... -
修改360浏览器内核
2014-03-10 17:19 1884浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 714有时候，为了网页设计的美观，需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1177<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 617对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1808开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 551进行网页设计时，由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 893<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 535■ 框架概念 ： 所谓框架便是网页画面分成几个框窗，同时取得 ... -
顶部浮动
2013-11-29 09:37 407<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 503很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现 ... -
转 CSS hack：针对IE6，IE7，firefox显示不同效果
2013-09-05 13:55 962CSS hack：针对IE6，IE7，firefox显示不同效 ... -
white-space:
2013-08-30 10:57 452定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1140{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 538<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 737所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同 ... -
如何在页面中设置IE浏览器的文档模式
2013-08-04 12:58 1052如何在页面中设置IE浏 ...
相关推荐
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
jQuery实现表格行的动态增加与删除(改进版)
在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行与列，在学习jQuery的过程中，自己试着在网上找寻教程，发现都不符合自己的需要，所以就动手改写了一份简单的diy表格。目前实现动态增加 删除最后一行...
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。
NULL 博文链接：https://busing.iteye.com/blog/684127
jQuery实现表格的增加、修改、删除、保存代码
动态表格,功能为点击添加按钮，表格增加一行并给其name属性赋予的值，点击删除，自动删除这一行，具体实现如下
使用jQuery实现动态添加、删除表格,向后台提交时更方便。
jQuery表格增加删除代码基于jquery1.7.js制作，单元格增行删行代码。
主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了JQuery动态添加和删除表格行的方法。分享给大家供大家参考。具体分析如下： 昨天做页面表格行动态添加和删除，看了无数的介绍，发现了一个好东东，JQuery。用它实现起来还真的是很方便，这个是我用到...
NULL 博文链接：https://wangrusheng5200.iteye.com/blog/539397
jquery脚本实现动态添加列，删除指定列
因为之前有一份资源有朋友咨询过X,Y轴交互及区间范围中进行取值的一个问题，所以补一份区间范围的交互及json格式获取数据的demo，如需实现自己所需效果可以自行修改，有疑问也可以留言，json输出如：[{min:0,max:10,...
主要介绍了jQuery实现的简单动态添加、删除表格功能,涉及jQuery事件响应及表格元素动态操作相关实现技巧,需要的朋友可以参考下
主要介绍了jQuery实现表格行和列的动态添加与删除方法,涉及jQuery针对页面元素的动态添加与删除相关技巧,非常简便实用,需要的朋友可以参考下
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能。分享给大家供大家参考，具体如下： HTML页面元素如下： <!-- 订单明细dialog --> 销售订单明细 xss=removed> 订单合同号 ...
VS2008 编写 基于Jquey ajax 开发的表格控件 能够自定义表头，编辑、添加、删除、统计 数据全都是 json 格式 还能实现 在 表格里插入时间
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下