`
stephen830
  • 浏览: 3001960 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

常用的js动态增加(删除)table数据行的功能

阅读更多
在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">&nbsp;</td>
<td width="17%" align="left">姓名</td>
<td width="23%" align="left">地址</td>
<td width="11%" align="left">&nbsp;</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
3
0
分享到:
评论
4 楼 stephen830 2008-11-07  
chengzheng 写道

挺好的东西。谢谢哈

3Q 
3 楼 chengzheng 2008-11-07  
挺好的东西。谢谢哈
2 楼 stephen830 2008-10-29  
zhijin 写道

下载来参考,多谢分享。

1 楼 zhijin 2008-10-29  
下载来参考,多谢分享。

相关推荐

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    js 操作 增加删除Table行

    本文将深入探讨如何使用JavaScript来动态地增加和删除表格(Table)的行。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素、`&lt;tr&gt;`(表格行)元素、`&lt;td&gt;`(表格数据单元格)元素组成。如果...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    JS动态增加删除表格行

    综上所述,动态增加和删除表格行是JavaScript中常见的功能,理解和掌握这些技术对于前端开发至关重要。无论是在传统的HTML表格中操作,还是利用CSS和JavaScript模拟表格,都有其适用的场景和技巧。在实际项目中,...

    jstable添加行删除行复制行

    在处理表格(Table)元素时,JavaScript可以帮助我们实现实时的动态操作,比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素。它用于创建表格,...

    JS动态添加、删除Table行排序(删除整行、删除整列)

    这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行,并实现排序功能,包括删除整行和整列。以下是对这些概念的详细解释: 1. **动态添加Table行:** 要动态添加行,我们可以使用`document....

    JS动态增加删除行

    在JavaScript(JS)编程中,动态增加和删除行是一项常见的任务,特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验,使用户能够实时地添加或移除数据,无需刷新整个页面。以下是对这一知识点的详细...

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    table JS 添加行和删除行

    总结来说,JavaScript提供了一种灵活的方式,让我们能够动态地操作HTML表格,无论是添加新的数据行还是删除不再需要的行。掌握这些技术,可以提升网页的交互性和用户体验。在实际项目中,还可以结合其他前端库如...

    动态增加table行

    在网页开发中,动态增加table行是一项常见的需求,特别是在数据展示和交互丰富的应用中。这个功能使得用户可以在表格中实时添加、编辑或删除数据行,提供了更好的用户体验。下面将详细解释这一技术及其相关知识点。 ...

    一个动态添加table行的js例子

    这个“动态增加删除表格行例子”提供了一个基础的模板,开发者可以根据自己的需求进行扩展,例如增加数据验证、异步数据加载、样式调整等功能。通过学习和理解这个例子,开发者可以更好地掌握JavaScript在网页动态...

    js获取table行 列 的值

    1. **增加计算功能**:可以在 `check` 函数中加入计算逻辑,比如统计选中行所有单元格的数值之和。 2. **响应式设计**:为了让表格在不同设备上都能正常显示,可以考虑使用 CSS 媒体查询或框架如 Bootstrap 来实现...

    table动态添加行

    为了实现动态添加行的功能,我们需要借助`JavaScript`或者现代前端框架如`jQuery`、`Vue.js`、`React.js`等。这里我们以纯`JavaScript`为例,解释如何实现这个功能: 1. **事件监听**:首先,我们需要在某个元素...

    JQuery动态添加删除table行.

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能,以提高网页交互性。 一、HTML基础 首先,我们需要一个基本...

    js 动态增加删除行hwh

    "js 动态增加删除行hwh"这个主题主要涉及到JavaScript操作DOM(Document Object Model)节点的能力。DOM是网页内容的结构化表示,通过它可以方便地对页面元素进行增删改查。 首先,让我们深入了解如何使用...

    利用jquery给指定的table动态添加一行、删除一行的方法

    这篇文章主要介绍了如何使用jQuery在指定的HTML表格(table)中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个...

    jquery 动态增加删除表格. 实例

    本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能,这对于创建数据表或者交互式表单来说非常实用。 首先,我们需要一个基本的HTML结构来展示表格。表格通常由`&lt;table&gt;`元素定义,每一行由`&lt;tr&gt;`元素...

Global site tag (gtag.js) - Google Analytics