在使用DOM动态生成table的时候我通常的写法如下:
//获得tbody节点,在DOM解析时,默认会有这个节点。
var tbody = document.getElementById("table_name").firstChild;
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("td中的内容"));
tr.appendChild(td);
tbody.appendChild(tr);
类似上面的写法如果没有成批的删除行的话,是可以应用的,但是如果要指定多行进行删除时就不那么好用了,在网上游览了一天,总结出了一个可以自由指定行删除的方法!
下面的就是例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
<script type="text/javascript">
var tbs;
function init(){//加载页面时得到tbody对象
tbs = document.getElementById("tb");
}
var s = new Array();//保存要删除的行对象
function create(){//这个函数是添加行,同时也是要删除的行
for(var i=0;i<3;i++){
var tr = tbs.insertRow(-1);
s.push(tr);//添加行对象
var td = tr.insertCell(-1);
td.appendChild(document.createTextNode("aa"+i));
//tbs.appendChild(tr);
}
}
function del(){//删除指定行
for(var i =0;i<s.length;i++){
tbs.parentNode.deleteRow(s[s.length-i-1].rowIndex);//注意s[s.length-i-1]写法,是倒着计算的
}
s.length = 0;
}
function again(){//添加正常的行内容
for(var i=0;i<3;i++){
var tr = tbs.insertRow(-1);
var td = tr.insertCell(-1);
td.appendChild(document.createTextNode("bb"+i));
//tbs.appendChild(tr);
}
}
</script>
</head>
<body onload="init()">
<table id="aa">
<tr>
<td>123123</td>
</tr>
<tr>
<td>123123</td>
</tr>
<tr>
<td>123123</td>
</tr>
<tbody id="tb"></tbody>
</table>
<input type="button" onclick="del()" value="del">//删除指定行
<input type="button" onclick="again()" value="again">//添加正常行
<input type="button" onclick="create()" value="create">//创建要删除的行
</body>
</html>
注意了:我的tbody是定义在页面中的,如果使用创建tbody节点的方法insertRow()将会返回null
分享到:
相关推荐
2. **添加行**:`addRow`函数将负责创建新的`<tr>`元素,并插入到表格的适当位置。通常,我们不希望删除第一行,所以新行会添加到第二行之后: ```javascript function addRow() { var table = document....
在处理表格(Table)元素时,JavaScript可以帮助我们实现实时的动态操作,比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先,我们需要了解HTML中的`<table>`元素。它用于创建表格,...
这篇文章主要介绍了如何使用jQuery在指定的HTML表格(table)中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个...
在JavaScript编程中,动态添加和删除表格行是一个常见的需求,特别是在网页交互和数据展示中。这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具...
Layui的table组件可以轻松创建各种复杂的表格,并提供多种自定义选项。在"index.html"文件中,我们通常会引入layui的CSS和JS文件,并初始化表格。例如: ```html <!DOCTYPE html> <table id="demo"></...
3. 插入行:将新行添加到表格的适当位置,可以是表格的末尾(使用`appendChild`)或其他特定位置(可能需要遍历现有行并找到合适的位置插入)。 动态插入行的操作与追加类似,主要区别在于插入位置的选择。它可能...
要动态地添加或删除行和列,我们需要对这些元素进行操作。 1. **增加行:** 添加新行通常通过创建新的`<tr>`元素并将其插入到表格中来实现。例如,可以使用JavaScript的`insertRow()`方法在表格的特定位置插入新行...
用户可以选择一行或多个行进行删除,并从数据模型中移除对应的对象。 3. 用户界面(UI)设计:动态Table的UI设计需要考虑用户体验,包括但不限于排序、过滤、分页等功能。用户应能方便地浏览大量数据,而无需一次性...
1. 文件管理系统:在文件管理界面,文件夹和文件可以以TableTree形式展示,用户可以直观地看到文件的层级关系,并轻松查找和操作。 2. 组织结构图:企业内部的部门和员工关系,可以借助TableTree清晰地呈现,方便...
在VC++编程环境中,动态创建SQL数据库涉及到...通过掌握以上知识,你将能够在VC++中利用ADO动态创建SQL Server数据库,并进行基本的数据操作,包括增、删、改、查。不断实践和学习,你将能够更加熟练地驾驭数据库编程。
在实际应用中,可能还需要考虑更多的细节,如事件监听(例如点击行进行操作)、数据绑定(如AJAX获取数据并动态生成表格)以及用户交互反馈等。熟练掌握这些技术,可以构建出具有高度交互性和灵活性的Web界面。
在JavaScript(JS)编程中,动态增加和删除行是一项常见的任务,特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验,使用户能够实时地添加或移除数据,无需刷新整个页面。以下是对这一知识点的详细...
当你需要添加一行时,可以通过JavaScript动态创建`<tr>`元素,并将其插入到表格的适当位置。例如,可以使用`document.createElement('tr')`创建新的行元素,然后利用`innerHTML`或`appendChild`方法添加内容和将其...
例如,`create_piece_table`可能会用`malloc`动态分配内存来创建piecetable,并初始化所有的表项。`insert_piece`函数则负责在piecetable中插入新的数据,可能需要考虑如何调整数据结构以保持其正确性。`find_piece`...
除了基本的排序和过滤,Web Dynpro table还可以实现更多高级功能,如计算总计、恢复数据更改、删除行以及显示全部数据。这些功能的实现同样依赖于上下文模型和相关Java类的支持。 ### 结论 在Web Dynpro中实现...
为了提高用户体验,可以考虑在添加或删除行时进行一些额外的处理,如验证输入、显示动画效果等。同时,为了防止误删,可以提供确认对话框。 4. **实际应用中的注意事项** - 为了避免内存泄漏,记得移除不再使用的...
- JavaScript或jQuery提供了DOM操作API,如`createElement()`、`appendChild()`和`innerHTML`等,可以用来创建新的`<tr>`元素,并将其插入到表格的适当位置。 - 如果使用jQuery,可以更简洁地使用`$('<tr>...</tr>...
动态添加行的基本思路是,当用户触发某个事件(如点击按钮)时,利用JavaScript创建新的`<tr>`(表格行)元素和对应的`<td>`(表格单元格)元素,然后将它们插入到表格中适当的位置。以下是一个简单的步骤概述: 1....
在Delphi中,我们可以使用ADO组件来与Access数据库进行交互,包括动态创建新的数据表。以下是对这一主题的详细说明: 1. ADO组件介绍: - **TADOConnection**:这是连接到数据库的主要组件,负责建立和管理与...
使用jQuery,我们可以动态创建或修改这些元素。例如,使用`.append()`方法可以向表格中添加新的行或单元格。 描述中提到的“jquery表格添加删除操作”是指利用jQuery实现表格数据的动态管理。在实际应用中,用户...