<html>
<head>
<title>动态增加删除行的实例</title>
<script language="javascript">
//使用clone方式来生成一行，targetTable是需要添加行的table的ID，sourceTable是clone对象
//talbe的ID，即复制sourceTable的第一行插入到targetTable中，完成增加行的操作
function insertRow(targetTable,sourceTable)
{
var oTBODY = document.getElementById(targetTable).tBodies.item(0);
var oTBODYData = document.getElementById(sourceTable).tBodies.item(0);
var rowsCount = oTBODYData.rows.length;
for(var i=0;i<rowsCount;i++){
oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));
}
}
function deleteRow(Field,targetTable){
var findex = getElementOrder(Field)-1;//此处减1是因sourceTable中有一行是隐藏的
document.getElementById(targetTable).deleteRow(findex);
}
// 查询出将要删除的行所在的位置index
function getElementOrder(field){
var i = 0;
var order = 0;
var elements = document.getElementsByName(field.name);
for(i=0;i<elements.length;i++){
order++;
if(elements[i]==field){
break;
}
}
return order;
}
</script>
</head>
<body>
<div><b>DIV中的动态表增加行</b></div><br>
<div style="height:200;width:400;overflow:auto;">
<table id = "sourceTable" style="display:none;">
<tr>
<td><input type="button" name = "deleteButton" value="删除" onclick="deleteRow(this,'targetTable')"></td>
<td><input type="text" name="username"></td>
<td><input type="password" name ="password"></td>
<td><input type = "text" name= "age"></td>
</tr>
</table>
<!--如果添加align="center"竟然会影响DIV的位置，而居左、居右都没影响。---table id="targetTable" width="100%" align="center">
<table id="targetTable" width="100%">
<tr>
<td> </td>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
</tr>
</table>
</div>
</body>
<input type="button" value="增加行" onclick="insertRow('targetTable','sourceTable');">
</html>
分享到：
相关推荐
JS 动态添加删除 HTML 元素实例 动态添加删除 HTML 元素是前端开发中常见的需求之一，今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先，让我们了解一下 HTML 文档对象模型（DOM），它...
在JavaScript（JS）编程中，动态增加和删除行是一项常见的任务，特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验，使用户能够实时地添加或移除数据，无需刷新整个页面。以下是对这一知识点的详细...
"JS添加删除DOM节点的方法_JS(Javascript)_紫苹果电脑网.mht"这个文件可能包含了更详细的操作实例和教程，建议参考学习以加深理解。通过熟练掌握这些技能，可以更有效地构建动态和交互性强的Web应用。
js实现动态增加和删除表格的行和列。实例 js实现动态增加和删除表格的行和列。实例
本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`<table>`元素定义，每一行由`<tr>`元素...
JavaScript可以用来操作DOM，例如添加、删除或修改元素，实现动态更新网页内容。 3. **表单验证**：在提交表单前，JavaScript可以对用户输入的数据进行验证，如检查邮箱格式、密码强度等，提供即时反馈，增强用户...
在JavaScript中，动态添加和删除表格是常见的网页交互功能，主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例，展示了如何利用JavaScript实现这个功能。在讲解之前，我们先了解一下HTML表格的基本...
JavaScript 实现在树形菜单中添加、删除节点实例 js note JavaScript实现在树形菜单中添加、删除节点实例，本程序侧重于学习，主要介绍一种在多级树节点中创建节点、删除节点，帮助了解树形菜单创作原理。
学习如何选择、添加、删除和修改DOM元素是JavaScript动态网页设计的关键。熟悉DOM节点的概念，如元素节点、属性节点和文本节点，以及使用方法如getElementById、getElementsByTagName等，能帮助开发者实现对网页内容...
本篇文章将详细探讨几种经典的jQuery动态增加删除表格的实例，同时也将涵盖一种使用原生JavaScript实现的方法。 首先，jQuery动态增加表格行通常涉及以下几个步骤： 1. **创建HTML结构**：一个基本的表格由`...
- **添加/删除元素**：使用`appendChild`、`removeChild`等方法动态添加或移除DOM节点。 - **事件绑定**：通过`addEventListener`为元素绑定事件处理函数。 ### 5. 事件处理 JavaScript可以通过事件处理机制来响应...
在介绍jQuery动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...
在"JavaScript动态网页设计经典实例"中，你将深入学习如何利用JavaScript来增强网页的交互性和用户体验。以下是一些核心知识点的详细说明： 1. **基础语法**：JavaScript的基础包括变量、数据类型（如字符串、数字...
1.动态创建select 代码如下: function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option 代码如下: ...
这本《JavaScript动态网页设计经典实例教程》显然是为了帮助读者深入理解和掌握JavaScript的运用，通过实例教学来提升实际开发技能。教程可能涵盖从基础语法到高级特性，包括DOM操作、事件处理、AJAX异步通信、面向...
《JavaScript动态网页设计经典实例教程》是一本专为学习JavaScript编程者准备的实践性教材，其核心在于通过实例教学，帮助读者深入理解JavaScript在动态网页设计中的应用。这本书的代码库包含了书中各个章节的示例...
2. **DOM操作**：Document Object Model（文档对象模型）是HTML和XML文档的结构表示，JavaScript通过DOM可以动态修改网页内容，例如添加、删除或修改元素。 3. **事件处理**：JavaScript通过监听和响应用户的交互，...
在处理添加删除按钮时，需要注意事件冒泡的原理，即点击按钮时，该事件不仅在按钮上触发，还会向上传递到父节点，直至文档的根节点。在delBtnData函数中，我们通过obj参数获取当前事件发生的节点，并使用两层...
主要介绍了JavaScript实现动态添加，删除行的方法,较为详细的分析了javascript操作table表格实现针对表格元素动态操作的相关技巧,需要的朋友可以参考下