`
liuxiang123
  • 浏览: 30483 次
  • 性别: Icon_minigender_1
  • 来自: 四川
社区版块
存档分类
最新评论

js 采用insertRow和deleteRow来添加和删除表格单元格

 
阅读更多
function addrow(obj,type){ // 表格添加行
	var rowtypedata = [
						[[1, ''], [1,'<input type="text" class="txt" name="newcatorder[]" value="0" />', 'td25'], [5, '<div><input name="newcat[]" value="新分区名称" size="20" type="text" class="txt" /><a href="javascript:;" class="deleterow" onClick="deleterow(this)">删除</a></div>']],
						[[1, ''], [1,'<input type="text" class="txt" name="neworder[{1}][]" value="0" />', 'td25'], [5, '<div class="board"><input name="newforum[{1}][]" value="新版块名称" size="20" type="text" class="txt" /><a href="javascript:;" class="deleterow" onClick="deleterow(this)">删除</a><select name="newinherited[{1}][]"><option value="">继承指定版块设置</option></select></div>']],
						[[1, ''], [1,'<input type="text" class="txt" name="neworder[{1}][]" value="0" />', 'td25'], [5, '<div class="childboard"><input name="newforum[{1}][]" value="新版块名称" size="20" type="text" class="txt" /><a href="javascript:;" class="deleterow" onClick="deleterow(this)">删除</a>&nbsp;<label><input name="inherited[{1}][]" type="checkbox" class="checkbox" value="1">&nbsp;继承上级版块设置</label></div>']],
					  ]; 
	var table = obj.parentNode.parentNode.parentNode.parentNode.parentNode;
	var row = table.insertRow(obj.parentNode.parentNode.parentNode.rowIndex);
		var typedata = rowtypedata[type];
	for(var i = 0; i <= typedata.length - 1; i++) {
		var cell = row.insertCell(i);
		cell.colSpan = typedata[i][0];
		var tmp = typedata[i][1];
		if(typedata[i][2]) {
			cell.className = typedata[i][2];
		}
		//tmp = tmp.replace(/\{(\d+)\}/g, function($1, $2) {return addrow.arguments[parseInt($2) + 1];});
		cell.innerHTML = tmp;
	    	}
}
function deleterow(obj){//表格删除行 
	var table = obj.parentNode.parentNode.parentNode.parentNode.parentNode;
	var tr = obj.parentNode.parentNode.parentNode;
	table.deleteRow(tr.rowIndex);
}

 

分享到:
评论

相关推荐

    js 添加删除表格

    在JavaScript中,添加和删除表格是常见的操作,特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能,并提供一个简单的源码示例。首先,我们需要理解HTML表格的基本结构,然后利用...

    table insertRow、deleteRow定义和用法总结

    本文将深入探讨`insertRow()`和`deleteRow()`这两个方法,以及它们在不同浏览器下的兼容性问题,同时也会提及相关的`insertCell()`和`deleteCell()`方法。 `insertRow()`方法用于在表格中插入新的行。在IE浏览器中...

    table对象中的insertRow与deleteRow使用示例

    首先检查输入的编号是否已存在于表格中,然后使用 `insertRow()` 在表格的最后插入新行,并添加对应的单元格内容。 ### 3. `deleteRow` 方法 `deleteRow()` 方法用于删除表格中的指定行。它需要一个参数,即要删除...

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

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

    JavaScript动态操作表格,添加,删除行、列及单元格

    在本文中,我们将深入探讨如何使用JavaScript来动态地操作表格,包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下,实现灵活的数据管理功能。 1. **创建表格** 在HTML中,我们可以使用`...

    javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)

    在JavaScript中,对HTML表格进行动态操作是一项常见的任务,特别是当需要根据用户交互或者程序逻辑来添加、删除或修改表格内容时。`insertRow()`、`deleteRow()`、`insertCell()`和`deleteCell()`是四个关键的方法,...

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

    通过 DOM,我们可以动态地添加、删除和修改 HTML 元素。 在我们的例子中,我们使用 JavaScript 语言来实现动态添加删除 HTML 元素。首先,我们定义了一个函数 `findObj`,用于根据元素的 ID 或名称来获取元素对象。...

    动态插入、添加删除表格行的JS代码

    ### 动态插入、添加删除表格行的JS代码 在网页开发中,表格是一个非常重要的元素,用于展示数据。为了使网页更具交互性,我们常常需要动态地对表格进行操作,比如插入或删除行等。本文将通过一个具体的示例来讲解...

    JS删除或者添加一行的代码

    描述解释:该代码提供了 JavaScript 实现动态添加或删除表格行的功能,可以直接测试和应用。 标签解释:删除添加一行,指的是在网页中通过 JavaScript 动态添加或删除表格行的操作。 部分内容解释: 该代码主要...

    原生js可编辑表格实现动态添加表格行数和删除表格行数

    接下来,我们用JavaScript来添加和删除行。为了方便操作,我们可以为表格添加一个ID,如`id="editableTable"`,然后通过`document.getElementById('editableTable')`获取到表格对象。 1. **动态添加行:** 创建新...

    javascript动态创建表格

    JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用,特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两种方式 1. 使用 `appendChild()` ...

    javascript 动态创建表格:新增、删除行和单元格.zip

    本压缩包中的"javascript 动态创建表格:新增、删除行和单元格.zip"内容着重介绍了如何使用JavaScript来动态地构建和修改HTML表格。 首先,我们要理解表格在HTML中的基本结构,它由`&lt;table&gt;`元素包含,内部包含`...

    JAVASCRIPT自动添加表格

    在提供的压缩包文件“JS操作表格大全”中,可能包含了各种JavaScript操作表格的实例代码,包括但不限于以上所述的添加和删除操作,还可能涵盖排序、过滤、编辑等功能。学习并实践这些示例,将有助于提升你对...

    js操作html表格, 增加,删除

    在本文中,我们将深入探讨如何使用JavaScript来实现HTML表格的增加和删除功能。 首先,HTML表格是由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)和`&lt;td&gt;`(单元格)等标签构成的。通过JavaScript,我们可以对这些元素...

    js控制表格的添加和修改

    JavaScript作为客户端脚本语言,赋予了网页动态交互的能力,使得我们可以利用它来控制表格的添加、删除和修改,提升用户体验。本文将深入探讨如何使用JavaScript实现这些功能。 首先,我们需要了解HTML中的`&lt;table&gt;...

    js操作表格, 带初始化的

    在这个主题中,我们将深入探讨如何使用JavaScript来创建、初始化、增加和删除表格元素。以下是一份详细的指南,帮助你理解并掌握这些核心概念。 首先,我们讨论如何初始化表格。在HTML中,可以创建一个基本的表格...

    js 添加、删除行

    本文将详细介绍如何使用JavaScript来添加和删除HTML表格中的行。 #### 二、添加行 ##### 1. 使用 `appendChild` 方法添加行 `appendChild` 是DOM树中Node对象的一个方法,用于在当前节点的子节点列表末尾添加一个...

    JS可编辑单元格内容可以增加或删除行和列

    在JavaScript(JS)编程中,处理可编辑的表格单元格并允许用户动态增删行和列是一项常见的需求。这样的功能可以极大地提升用户交互性和数据管理的便利性。在这个场景下,我们将深入探讨如何使用JavaScript来实现这个...

    通过点击添加按钮即可自动添加一行点击删除即可自动删除一行

    描述进一步解释了这个功能的实现方式,即通过JavaScript编程来响应用户的点击事件,执行相应的添加和删除操作。 在Web开发中,JavaScript是一种重要的客户端脚本语言,用于增强网页的交互性和动态性。它可以直接在...

Global site tag (gtag.js) - Google Analytics