蜗小牛
- 浏览: 63303 次
- 性别:
- 来自: 大连
-
文章分类
最新评论
<!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 620CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1046script代码： <script type=" ... -
html之marquee详解
2014-03-28 10:07 646该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 19091。html中a标签的四个属性书写是有顺序的，如果顺序不对，显 ... -
修改360浏览器内核
2014-03-10 17:19 1945浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 770有时候，为了网页设计的美观，需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1227<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 655对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1926开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 593进行网页设计时，由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 956<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 577■ 框架概念 ： 所谓框架便是网页画面分成几个框窗，同时取得 ... -
顶部浮动
2013-11-29 09:37 446<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 549很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现 ... -
转 CSS hack：针对IE6，IE7，firefox显示不同效果
2013-09-05 13:55 1005CSS hack：针对IE6，IE7，firefox显示不同效 ... -
white-space:
2013-08-30 10:57 508定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1229{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 602<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 780所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同 ... -
如何在页面中设置IE浏览器的文档模式
2013-08-04 12:58 1106如何在页面中设置IE浏 ...
相关推荐
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
这篇文章主要讲解了如何使用jQuery实现表格行的动态增加与删除，并对原有的实现进行了改进，以适应含有input元素的场景，避免了数据丢失的问题。在实际的网页开发中，这种功能非常常见，例如在表单编辑或者数据管理...
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行与列，在学习jQuery的过程中，自己试着在网上找寻教程，发现都不符合自己的需要，所以就动手改写了一份简单的diy表格。目前实现动态增加 删除最后一行...
本文将深入探讨如何使用jQuery实现表格的动态添加和删除行功能，这在许多网页应用中是非常常见的需求。 首先，让我们理解基本概念。在HTML中，表格由`<table>`元素定义，每行由`<tr>`元素表示，而单元格则由`<td>`...
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
首先，我们从标题"jQuery表格增加删除代码.zip"可以推断，这个压缩包包含的是一个使用jQuery实现的表格动态操作的示例。这种功能通常用于用户需要动态添加或删除表格行的场景，比如在线表单填写、数据管理界面等。 ...
本文将深入探讨如何使用 jQuery 动态添加和删除表格行，以实现高效且用户友好的数据展示。 首先，理解 HTML 表格的基本结构至关重要。`<table>` 元素用于创建表格，`<tr>` 代表表格行，`<td>` 或 `<th>` 分别表示...
这篇博客“jquery 添加、删除表格”显然关注的是如何使用jQuery来操作HTML表格，实现动态添加和删除行的功能。这在构建数据驱动的Web应用中尤其常见，比如用户管理、订单处理或任何需要展示和编辑表格数据的场景。 ...
在使用JQuery来实现动态表格增加行的场景中，主要涉及到的技术点包括： 1. DOM操作：文档对象模型（DOM）允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中，DOM操作用于动态地向表格中插入新的...
通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....
总结，使用jQuery实现动态添加和删除表格行，不仅简化了DOM操作，还提高了交互性。通过结合Ajax，我们可以轻松地将这些更改同步到后台服务器，实现数据的实时更新。同时，通过添加适当的动画效果，可以进一步提升...
本主题聚焦于如何使用jQuery实现表格中添加和删除行的功能，这在数据展示和用户交互中非常常见。通过点击按钮动态添加或删除表格行，可以提高用户的交互体验，使得数据管理更加灵活。 首先，我们需要创建一个基本的...
以上就是使用jQuery实现表格增加、修改、删除和保存功能的基本步骤。在实际项目中，你可能还需要考虑错误处理、数据验证、用户交互反馈等更复杂的情况。通过理解这些基本概念，你可以灵活地扩展和定制自己的功能，以...
通过创建新的DOM元素、添加事件监听器和应用CSS样式，我们可以轻松地实现动态增加、选中和删除表格行。这对于构建交互式Web应用，尤其是在处理表格数据时，是非常实用的工具。在实际项目中，你可以根据需要进一步...
本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`<table>`元素定义，每一行由`<tr>`元素...
本实例将深入探讨如何使用jQuery来实现表格的动态修改和隐藏功能，这对于创建交互式用户界面至关重要。 首先，让我们理解jQuery的核心概念。jQuery通过封装JavaScript API，使得选择元素、操作元素、添加事件监听器...
六、动态添加与删除 在实际应用中，表格的增删可能需要根据用户操作动态进行。可以使用Ajax异步加载数据，然后使用上述方法动态添加行。同样，删除后也可以触发Ajax请求，更新服务器端的数据。 七、优化性能 当表格...
本案例主要探讨如何利用jQuery为HTML表格动态添加行并实现删除功能，这对于构建交互性强的数据展示页面至关重要。 首先，我们需要理解HTML表格的基本结构。一个简单的表格由`<table>`元素开始，内部包含`<tr>`...