JavaScript:操作Table(二）:使用DOM对象（Table、TableRow、TableCell）
<html>
<head>
<title>Table Test</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function testTable() {
var tb1 = $("tb1");//Table对象
tb1.createCaption()
.innerHTML = "标题";
//tb.deleteCaption()
;
var tr = tb1.rows
;//TableRow对象数组
//alert(tb1.rows.length
);//0
tb1.insertRow(tb1.rows.length).innerHTML = "<td>行</td>";
//alert(tb1.rows.length);//1
tb1.insertRow
(tb1.rows.length).innerHTML = "<td>行2</td>";
//tb1.deleteRow
(0);
}
function testTableRow() {
var tb1 = $("tb1");//Table对象
var tr = tb1.rows;//TableRow对象数组
//alert(tr[0].rowIndex
);//行号
var td = tr[0].cells;//TableCell对象数组
//alert(td.length);
tr[0].insertCell(0)
.innerHTML += " td add"
tr[1].insertCell(1).innerHTML += " td add"
//tr[1].deleteCell(0)
;
}
function testTableCell() {
var tb1 = $("tb1");//Table对象
var tr = tb1.rows;//TableRow对象数组
var td = tr[0].cells
;//TableCell对象数组
alert(td[0].cellIndex
);//单元格编号
td[1].colSpan
= "2";
td[0].rowSpan
= "2";
}
window.onload = function() {
testTable();
testTableRow();
testTableCell();
}
</script>
</head>
<body>
<input type="button" value="test" onclick="testTable()"/>
<table id="tb1" border="1" background="#fff">
</table>
</body>
</html>
分享到：
相关推荐
* insertCell(index)：返回 TableCell 对象 * deleteCell(index)：删除行中的指定的单元格 1.1.3. TableCell 对象 TableCell 对象代表一个 HTML 表格单元格，在 HTML 文档中，一个 <td> 标签表示一个 TableCell ...
在实际应用中，JavaScript的Table表格对象还可以结合Ajax实现异步数据加载，或者使用框架如jQuery、React、Vue等进行更复杂的表格操作。通过熟练掌握这些方法，开发者可以创建出交互性更强、功能更丰富的Web应用表格...
另一种方法是使用虚拟DOM或Web组件来减少DOM操作。 ### 6. 注意事项 - 如果表格数据是动态加载的，确保在数据加载完成后执行排序操作。 - 对于日期、时间等复杂类型的数据，需要进行适当的转换处理。 - 考虑到国际...
DOM中常见的对象包括Select、Option、Table、TableRow、TableCell等，这些对象有着特定的属性和方法，比如Select对象的选项数、Option对象的文本和值、Table对象的行和列操作等。 2. BOM模型（浏览器对象模型） BOM...
通过JavaScript，我们可以操作DOM（文档对象模型），这是HTML和XML文档的编程接口。 3. **动态创建DOM元素** 要动态添加表格，首先需要创建新的DOM元素。这通常通过`document.createElement()`方法实现，例如创建...
var cell = $(table).find('tr:eq(' + (row - 1) + ') td:eq(' + (col - 1) + ')'); cell.attr('colspan', cell.parent().find('td').length); for (var i = 1; i ; i++) { cell.parent().find('td:eq(' + (col ...
在JavaScript（JS）中，动态操作表格是一种常见的需求，它涉及到HTML DOM（Document Object Model）的元素操作。本文将深入探讨如何使用JavaScript实现对表格的动态添加、删除、修改和查询功能，结合给出的标签...
在JavaScript中，我们可以使用DOM操作或者jQuery库来实现这个功能。 **纯JavaScript方法：** 1. **获取表格元素：** 首先，我们需要获取到表格元素。可以使用`document.getElementById()`、`document....
在JavaScript的世界里，HTML表格（Table）是一...然而，实际开发中可能需要根据具体需求进行更复杂的定制和优化，这就需要开发者具备深厚的JavaScript和DOM操作基础。希望这个"JS操作table大全"能为你提供有用的参考。
最后，关于兼容性问题，JavaScript的大多数DOM操作在现代浏览器中都有很好的支持。然而，IE6和Firefox的兼容性可能需要特别处理。例如，IE6不支持`addEventListener`，需要使用`attachEvent`替代。同时，对于老版本...
例如，可以使用`document.createElement('table')`创建一个新的表格对象，然后设置其属性如`id`或`class`。 接下来，我们需要创建表格的行`<tr>`和列`<td>`. 使用`createElement()`方法创建这些元素，然后用`...
4. **创建表格实例**：使用`useTable`钩子创建表格实例，可以在此时配置各种选项和插件。 ```javascript const { getTableProps, getTableBodyProps, headerGroups, prepareRow, page, canPreviousPage, ...
在JavaScript中，我们可以使用DOM（文档对象模型）来操作这些元素，例如创建新元素、插入元素或删除元素。 1. **添加行** 当用户点击“添加行”按钮时，JavaScript会监听这个事件。可以使用`addEventListener`方法...
在网页开发中，表格（Table）是展示数据的常用元素，而JavaScript（js）则提供了强大的功能来操作DOM（文档对象模型），包括动态地向表格中添加行。本篇文章将详细探讨如何使用JavaScript高效地实现表格动态添加行，...
总结起来，"dwr城市选择的联动，util.js方法的使用，动态table"涉及的技术主要包括DWR框架、JavaScript DOM操作以及服务器端与客户端的数据交互。这些技术的综合运用，可以创建出高效、实时的Web应用，满足用户对...
在网页开发中，JavaScript提供了丰富的API来实现对表格的控制，包括添加、删除单元格（Cell）、行（Row）或列（Column），以及获取和修改单元格内容。以下将详细探讨JavaScript操作表格的一些关键特性： 1. **选择...
在本主题“createtable.rar_javascript”中，我们主要探讨如何使用JavaScript来创建表格，并实现诸如单元格合并这样的高级操作。 首先，让我们从基础开始，了解如何在HTML中创建一个基本的表格。HTML的`<table>`...
可以使用`document.querySelector()`或`document.querySelectorAll()`来选择`<table>`元素，然后通过DOM遍历获取所有行和单元格的数据。例如： ```javascript var table = document.querySelector('table'); var...
5. **遍历表格**：使用`for`循环或`forEach()`遍历表格元素，可以访问每个单元格并进行操作。例如，遍历所有单元格可以这样写： ```javascript var cells = document.querySelectorAll('#myTable td'); cells....