在WEB项目中有些输入数据的地方，由于数据比较多，经常会遇到要求能动态的增加输入的行数，可以更便捷的往系统中录入数据。这时就经常会使用的通过javascript动态增加（或删除）table的1行。下面把以前自己用的例子贴出来，在ie和firefox下都可以正常运行，有兴趣的朋友也可以参考下。
实例图如下：
例子example.html内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>动态表格</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="default.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" src="autotable.js"></script>
</head><body bgcolor="#FFFFFF" topmargin="15px" leftmargin="5px" rightmargin="5px">
<center><b>动态表格</b></center>
<script>
//定义动态表的id
var autoTableId="idMultiTable";
//定义动态表中每一行的数据
var autoTableRowData=new Array(
'<a href="#" name="deleteRow">删除</a>',
'<input type="text" size="12" name="name" id="name" value="">',
'<input type="text" size="35" name="address" id="address" value="">',
'<a href="#" name="insertRow">添加</a>'
);
//定义添加按钮的name属性
var addTableRowName="insertRow";
//定义删除按钮的name属性
var delTableRowName="deleteRow";
</script>
<table class="tabelBoder" id="idMultiTable" width="100%" align="center" cellspacing="0" cellpadding="3" border="0">
<tr height="30" class="RH1">
<td width="4%" align="left"> </td>
<td width="17%" align="left">姓名</td>
<td width="23%" align="left">地址</td>
<td width="11%" align="left"> </td>
</tr>
<tr class="N1" onmouseover="this.className='N2'" onmouseout="this.className='N1'">
<td class="DN"><a href="#" name="deleteRow">删除</a></td>
<td class="DN"><input type="text" size="12" name="name" id="name" value="" ></td>
<td class="DN"><input type="text" size="35" name="address" id="address" value="" ></td>
<td class="DN"><a href="#" name="insertRow">添加</a></td>
</tr>
</table>
<table width="100%" align="center" cellspacing="0" cellpadding="3" border="0">
<tr height="30"><td align="left" ><input type="button" name="button" class="btn" value="添加" onclick="addTableRow(-1);"></td></tr>
</table>
<script>setAddFunction();</script>
</body></html>
用到的autotable.js内容：
//添加1行
function addTableRow(rowIndex)
{
var tbobj=document.getElementById(autoTableId);
var trobj,tdobj;
if(rowIndex==-1){
trobj=tbobj.insertRow(-1);
}else{
trobj=tbobj.insertRow(rowIndex+1);
}
trobj.className="N1";
trobj.onmouseover=new Function("this.className='N2';");
trobj.onmouseout=new Function("this.className='N1';");
for(var i=0;i<autoTableRowData.length;i++){
tdobj=trobj.insertCell(-1);
tdobj.className="DN";
tdobj.innerHTML=autoTableRowData[i];
}
//重新定义onclick事件
setAddFunction();
}
//删除1行
function delTableRow(rowIndex){
var tbobj=document.getElementById(autoTableId);
if(rowIndex==-1){
if(tbobj.rows.length>1){
tbobj.deleteRow(tbobj.rows.length-1);
}
}else{
tbobj.deleteRow(rowIndex);
}
}
//定义添加和删除动态行的onclick方法
function setAddFunction(){
var addNames = document.getElementsByName(addTableRowName);
for(var i=0;i<addNames.length;i++){
addNames[i].onclick=new Function("addTableRow(this.parentNode.parentNode.rowIndex);");
}
var delNames = document.getElementsByName(delTableRowName);
for(var i=0;i<delNames.length;i++){
delNames[i].onclick=new Function("delTableRow(this.parentNode.parentNode.rowIndex);");
}
}
附件：本文使用的例子全部在最后的压缩包zip（autotable.zip）中。
------------------------------------------
分享知识，分享快乐，希望文章能给需要的朋友带来小小的帮助。
- 大小: 6.4 KB
分享到：
相关推荐
在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`<table>`元素及其相关...
本文将深入探讨如何使用JavaScript来动态地增加和删除表格（Table）的行。 首先，我们需要了解HTML表格的基本结构。一个基本的表格由`<table>`元素、`<tr>`（表格行）元素、`<td>`（表格数据单元格）元素组成。如果...
使用javascript实现table动态增加删除行列。
综上所述，动态增加和删除表格行是JavaScript中常见的功能，理解和掌握这些技术对于前端开发至关重要。无论是在传统的HTML表格中操作，还是利用CSS和JavaScript模拟表格，都有其适用的场景和技巧。在实际项目中，...
在处理表格（Table）元素时，JavaScript可以帮助我们实现实时的动态操作，比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先，我们需要了解HTML中的`<table>`元素。它用于创建表格，...
这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行，并实现排序功能，包括删除整行和整列。以下是对这些概念的详细解释： 1. **动态添加Table行：** 要动态添加行，我们可以使用`document....
在JavaScript（JS）编程中，动态增加和删除行是一项常见的任务，特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验，使用户能够实时地添加或移除数据，无需刷新整个页面。以下是对这一知识点的详细...
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
总结来说，JavaScript提供了一种灵活的方式，让我们能够动态地操作HTML表格，无论是添加新的数据行还是删除不再需要的行。掌握这些技术，可以提升网页的交互性和用户体验。在实际项目中，还可以结合其他前端库如...
在网页开发中，动态增加table行是一项常见的需求，特别是在数据展示和交互丰富的应用中。这个功能使得用户可以在表格中实时添加、编辑或删除数据行，提供了更好的用户体验。下面将详细解释这一技术及其相关知识点。 ...
这个“动态增加删除表格行例子”提供了一个基础的模板，开发者可以根据自己的需求进行扩展，例如增加数据验证、异步数据加载、样式调整等功能。通过学习和理解这个例子，开发者可以更好地掌握JavaScript在网页动态...
1. **增加计算功能**：可以在 `check` 函数中加入计算逻辑，比如统计选中行所有单元格的数值之和。 2. **响应式设计**：为了让表格在不同设备上都能正常显示，可以考虑使用 CSS 媒体查询或框架如 Bootstrap 来实现...
为了实现动态添加行的功能，我们需要借助`JavaScript`或者现代前端框架如`jQuery`、`Vue.js`、`React.js`等。这里我们以纯`JavaScript`为例，解释如何实现这个功能： 1. **事件监听**：首先，我们需要在某个元素...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能，以提高网页交互性。 一、HTML基础 首先，我们需要一个基本...
"js 动态增加删除行hwh"这个主题主要涉及到JavaScript操作DOM（Document Object Model）节点的能力。DOM是网页内容的结构化表示，通过它可以方便地对页面元素进行增删改查。 首先，让我们深入了解如何使用...
这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...
本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`<table>`元素定义，每一行由`<tr>`元素...