<!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="jquery-1.7.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><input type='text' name='mc_"+_len+"' id='mc_"+_len+"' /></td>"
+"<td><input type='text' name='dhhm_"+_len+"' id='dhhm_"+_len+"' /></td>"
+"<td><a href=\'#\' onclick=\'finish("+_len+")\'>完成</a></td>"
+"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删除</a></td>"
+"</tr>");
})
})
//删除<tr/>
var deltr =function(index)
{
var _len = $("#tab tr").length;
$("tr[id='"+index+"']").remove();//删除当前行
}
function finish(index){
alert("mc:" + $("#mc_"+index).val());
alert("dhhm:" + $("#dhhm_"+index).val());
}
</script>
</head>
<body>
<table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
<tr>
<td width="20%">序号</td>
<td>名称</td>
<td>电话号码</td>
<td colspan='2'>操作</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>
分享到：
相关推荐
今天要分享一款基于jQuery的标签插件，使用这款插件，我们可以动态增加和删除标签，在写博文的时候，我们为博文打标签就不用逗号或者分号隔开了，当你每新增一个标签时，该插件就会为你检查标签内容输入的正确性，...
本资源"jQuery动态添加删除编辑标签代码.zip"提供了一种实现动态管理标签页的方法，尤其适用于需要用户交互性高的Web应用。下面将详细阐述这个代码实现的功能及其背后的编程原理。 首先，"jQuery动态添加删除编辑...
动态新增行的核心实现技术通常涉及到前端的JavaScript（或其库如jQuery）以及后端的数据处理。在前端，当用户点击“添加行”按钮时，JavaScript代码会动态创建新的HTML表单行，并将其插入到表格中。这包括生成新的...
要使用jQuery动态添加行，我们可以先创建一个新的`<tr>`元素，然后在其中填充`<td>`元素，最后将其插入到表格中。以下是一个基本的添加行示例： ```javascript // 创建新行 var newRow = $("<tr><td>新数据1</td>...
JQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理和动画等功能，使得实现动态增加行的报表变得更为简便。下面将详细阐述如何使用 JQuery 实现这一功能。 首先，我们需要创建一个基本的 HTML ...
本篇文章将详细讲解基于jQuery的动态添加、删除和移动列表插件的实现方法，以及如何利用相关代码进行数据操作。 首先，jQuery动态添加功能允许我们在用户交互时实时向页面中的列表添加新元素。例如，当你有一个表单...
通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....
二、新增动态列表项 1. **创建新元素**：使用`$('<li>')`创建新的`<li>`元素，然后可以添加文本或HTML内容。 2. **绑定事件**：使用`on()`方法为动态添加的元素绑定事件，例如`$('body').on('click', '.delete', ...
在使用JQuery来实现动态表格增加行的场景中，主要涉及到的技术点包括： 1. DOM操作：文档对象模型（DOM）允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中，DOM操作用于动态地向表格中插入新的...
在本主题中，我们将深入探讨"jQuery动态表单"这一功能，它允许我们在网页上动态地创建、修改和删除表单元素，极大地提高了用户界面的交互性和灵活性。 动态表单是Web开发中的一个重要概念，尤其是在需要用户输入不...
在提供的文件中，"GridView新增一行.doc"和"GridView新增一行2.txt、3.txt"可能包含了关于如何在GridView中添加新行的详细步骤和代码示例，而"jQuery增加一行.txt"则可能涵盖使用jQuery进行数据操作的实践指导。...
需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据源，并且可以新增空白行，直接...
5. 动态DOM更新：根据用户输入或操作，实时更新页面内容。 这个项目可以帮助开发者掌握如何利用jQuery实现用户交互功能，对于初学者来说，这是一个很好的实践案例，可以提升他们实际操作网页开发的能力。同时，对于...
在JavaScript中，动态添加行和删除行是网页交互中常见的需求，特别是在表格或者列表展示数据时。这通常涉及到DOM操作，包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点： 1. DOM操作： - `...
总结起来，jQuery动态添加表单涉及的主要知识点包括：引入jQuery库、创建和操作DOM元素、绑定事件处理程序以及处理表单提交。这些技术在现代Web开发中是不可或缺的，尤其是对于需要动态交互和实时更新的网页应用。
本资源"jQuery用户交互动态展示信息特效.zip"显然是一个包含jQuery动态效果的代码包，特别针对用户交互时的信息展示。这种特效能够提升用户体验，使网站或应用更具吸引力和趣味性。 首先，我们要理解"万剑穿心的...
本文介绍了jQuery 实时保存页面动态添加的数据的示例，分享给大家，具体如下： 需求：用户填写的东西，必须要实时保存 分析：监听用户操作事件，如：change、keyup 等，向后端发送请求 实际情况： 用户填写的表单，...
因为之前有一份资源有朋友咨询过X,Y轴交互及区间范围中进行取值的一个问题，所以补一份区间范围的交互及json格式获取数据的demo，如需实现自己所需效果可以自行修改，有疑问也可以留言，json输出如：[{min:0,max:10,...
"经典jquery局部刷新增删改查"这个主题聚焦于利用jQuery实现数据的动态更新，即“增删改查”功能，并且只涉及到页面的特定部分，而不是整个页面的刷新。 1. **jQuery基本概念**：jQuery是一个轻量级的库，通过链式...
《jQuery 动态增加输入框技术详解》 在网页开发中，经常遇到需要根据用户需求动态添加或删除输入框的情况，比如购物车的商品数量增减、表单的自定义字段等。jQuery，作为一款强大的JavaScript库，提供了丰富的API来...