`

动态添加删除行

 
阅读更多
//添加行
function addRow(tableName){
	if(window.ActiveXObject){
		addRowIE(tableName);
	}else{
		addRowFF(tableName);
	}
}
//删除行
function deleteRow(evt,tableName){
	if(window.ActiveXObject){
		deleteRowIE(tableName);
	}else{
		deleteRowFF(evt,tableName);
	}
}
//
function   get_Element(the_ele,the_tag){
	the_tag = the_tag.toLowerCase();
	if(the_ele.tagName.toLowerCase()==the_tag){
		return the_ele;
	}
	while(the_ele=the_ele.offsetParent){
		if(the_ele.tagName.toLowerCase()==the_tag){
			return the_ele;
		}
	}
	return(null);
}
function deleteRowIE(the_table){
	var the_cell;  
	the_cell=get_Element(event.srcElement,"td");  
	var index=the_cell.parentElement.rowIndex;
	if(the_cell==null)   return;   
	if(the_table.rows.length==1)   return;  
	var count=document.getElementById('inputTable').rows.length;
	//先往上移,再删除
	for(var i=index;i<count-1;i++){
		document.getElementById("inputTable").moveRow(i,i+1);
	}
	the_table.deleteRow(count-1);
}
function deleteRowFF(evt,the_table){
	var   the_cell;  
	the_cell=get_Element(evt.target,"td");
	var   index=the_cell.parentNode.rowIndex;
	//直接删除
	the_table.deleteRow(index);
}
function addRowIE(tableName) 
{ 
	var newTr = document.getElementById(tableName).insertRow(); 
	//var newTdIndex = newTr.insertCell(); 
	var newTd0 = newTr.insertCell();
	var newTd1 = newTr.insertCell();
	var newTd2 = newTr.insertCell();
	newTd0.className="list_data_bg";
	newTd1.className="list_data_bg";
	newTd2.className="list_data_bg";
	newTd0.innerHTML = '<input type="hidden" name="stage_cd" value="0"/><span>noStage</span>'; 
	newTd1.innerHTML = '<input type="hidden" name="module_cd" value="0"/><span>noModule</span>'; 
	newTd2.innerHTML = '<a href="#" onclick="deleteRow(event,inputTable)"><IMG SRC="oams/images/standard/delete.gif" BORDER="0"></a>'; 
}
function addRowFF(tableName){
	var newTr = document.getElementById(tableName).insertRow(-1);
	//var newTdIndex = newTr.insertCell(); 
	var newTd0 = newTr.insertCell(-1);
	var newTd1 = newTr.insertCell(-1);
	var newTd2 = newTr.insertCell(-1);
	newTd0.setAttribute("class","list_data_bg");
	newTd1.setAttribute("class","list_data_bg");
	newTd2.setAttribute("class","list_data_bg");
	newTd0.innerHTML = '<input type="hidden" name="stage_cd" value="0"/><span>noStage</span>'; 
	newTd1.innerHTML = '<input type="hidden" name="module_cd" value="0"/><span>noModule</span>'; 
	newTd2.innerHTML = '<a href="#" onclick="deleteRow(event,inputTable)"><IMG SRC="oams/images/standard/delete.gif" BORDER="0"></a>'; 
}
分享到:
评论

相关推荐

    jquery动态添加删除行 点击按钮动态添加行或动态删除行

    jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列

    jquery表格动态添加删除行代码.zip

    本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能,为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能,即在表格中动态地添加和删除行,这对于数据展示和编辑是非常实用的。 首先...

    74、jquery表格动态添加删除行代码

    &lt;title&gt;jQuery动态添加删除行 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; 姓名 年龄 操作 张三 &lt;td&gt;25 &lt;td&gt;&lt;button class="delete"&gt;删除&lt;/button&gt;&lt;/td&gt; ...

    jquery动态添加删除行

    本篇文章将详细介绍两种jQuery实现动态添加删除行的方法。 ### 方法一:使用append()和remove() **添加行:** `append()`函数是jQuery中的一个方法,用于在元素末尾添加新的内容。在表格中添加新行,我们可以先...

    js动态添加 删除行

    js动态添加 删除行

    js动态添加删除行,实用

    &lt;title&gt;JS 动态添加删除行 姓名 年龄 &lt;!-- 动态添加的数据行将放在这里 --&gt; ()"&gt;添加行 ()"&gt;删除选中行 function addRow() { var table = document.getElementById('myTable'); var ...

    jquery表格添加删除行点击按钮动态添加删除行

    总结起来,通过结合HTML、CSS和jQuery,我们可以实现一个具有动态添加和删除行功能的表格。这个功能对于任何需要用户编辑和管理数据的网页应用都非常实用。在实际开发中,可以进一步优化和扩展这个功能,使其更加...

    动态添加/删除表格行并提交内容到后台

    在开发Web应用时,动态添加和删除表格行是常见的需求,尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能,为初学者提供一个基础的实践指导。 首先,我们要了解...

    CSS控制按钮显示、动态添加删除行

    然后,我们可以用JavaScript监听按钮的点击事件,执行添加或删除行的操作: ```javascript document.getElementById('addRow').addEventListener('click', function() { var table = document.getElementById('...

    JS 添加删除行

    ### JS动态添加删除行知识点详解 #### 一、概述 在网页开发中,经常会遇到需要动态操作表格元素的情况,比如动态地添加或删除表格行。本文将基于给定的脚本代码来详细介绍如何使用JavaScript(简称JS)实现动态...

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    在JavaScript编程中,实现...通过以上步骤,我们可以实现一个功能完备的表格动态添加删除行的JS特效,同时确保序号的自动更新和Tab切换效果。这样的功能在许多Web应用中都有广泛的应用,比如数据录入、配置管理等场景。

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

    支持动态删除一行。 先演示结果,如中意了在好好研究代码。 1、原始界面如下: 2、添加一行,如要添加一行需点击“添加”按钮,现点击两下会自动添加两行,效果如下截图: 3、删除一行,如要删除指定行,先要选中...

    js/Jquery/javascript动态添加删除行,统计计算总数.

    用Jquery 添加删除行, 并进行计算 品名 数量 单价 金额(计算得出) 添加(按钮) 品名 数量 单价 金额(计算得出) 删除(按钮) .... --- 总计:

    js动态添加行和删除行

    在JavaScript中,动态添加行和删除行是网页交互中常见的需求,特别是在表格或者列表展示数据时。这通常涉及到DOM操作,包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点: 1. DOM操作: - `...

    jquery动态添加 删除指定行元素

    本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先,我们来看动态添加行的操作。这个过程通常包括获取表格引用、计算新行的索引、克隆已有行并将其插入到表格中。在提供的代码中,`add()`函数...

    JQuery动态添加删除table行.

    - 使用`on()`方法来绑定事件,而不是直接使用`click()`,因为这样可以确保即使动态添加的元素也能响应事件。 - 考虑到性能,避免在循环中使用`append()`或`remove()`,因为它们会触发DOM的重新渲染。如果需要大量...

    TableLayout,实现动态添加和删除行,并实现统计表格中的数据

    在这个场景中,我们将深入探讨如何使用TableLayout动态添加和删除行,以及如何实现数据的统计。 1. **动态添加和删除行** 在TableLayout中,每一行是由TableRow对象构成的。要动态添加行,首先需要创建一个新的...

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`&lt;table&gt;`元素用于创建...

    jquery表格动态添加删除行特效代码

    本示例“jquery表格动态添加删除行特效代码”是利用jQuery来实现的一个功能,允许用户在表格中动态地添加和删除行,极大地提高了交互性和用户体验。下面将详细介绍这个功能的实现原理和相关知识点。 首先,我们需要...

    JS动态添加删除HTML元素(实例)

    本例子展示了如何使用 JavaScript 实现动态添加删除 HTML 元素,包括获取元素对象、添加新行、删除行等操作。通过这篇文章,我们可以更好地理解 JavaScript 和 HTML 之间的交互,并掌握动态添加删除 HTML 元素的技术...

Global site tag (gtag.js) - Google Analytics