Javascript 表格操作实现代码
Javascript 是一种广泛应用于 Web 开发的脚本语言,它可以用来实现网页的交互效果和动态更新。在本文中,我们将通过实例代码来介绍如何使用 Javascript 实现表格操作,包括获取表格值、创建表格等。
获取表格值
在 HTML 中,表格是通过 `<table>` 元素来表示的,而每个表格单元格则是通过 `<td>` 元素来表示的。要获取表格中的值,可以使用 `document.getElementById` 方法来获取表格对象,然后遍历表格中的每个单元格,并使用 `innerHTML` 属性来获取单元格中的值。
例如:
```
var tabobj = document.getElementById("ch"); // 获取表格对象
for (var i = 0; i < tabobj.rows.length; i++) {
var row = tabobj.rows[i];
for (var j = 0; j < row.cells.length; j++) {
var cell = row.cells[j];
console.log(cell.innerHTML); // 获取单元格中的值
}
}
```
创建表格
使用 Javascript 创建表格可以使用 `document.createElement` 方法来创建 `<table>`、`<tr>` 和 `<td>` 元素,然后使用 `appendChild` 方法将这些元素添加到文档中。
例如:
```
var table = document.createElement("table"); // 创建表格对象
var tbody = document.createElement("tbody"); // 创建表格体对象
table.appendChild(tbody); // 将表格体添加到表格中
var row = document.createElement("tr"); // 创建表格行对象
var cell = document.createElement("td"); // 创建表格单元格对象
cell.innerHTML = "测试"; // 设置单元格中的值
row.appendChild(cell); // 将单元格添加到表格行中
tbody.appendChild(row); // 将表格行添加到表格体中
document.body.appendChild(table); // 将表格添加到文档中
```
完整示例代码
以下是完整的示例代码,演示了如何使用 Javascript 实现表格操作,包括获取表格值和创建表格:
```
<input id="txtping">
<table width="400" border="0" cellspacing="0" cellpadding="1" id="ch">
<tr>
<td>中国北京</td>
</tr>
<tr>
<td>中国上海</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
var tabobj = document.getElementById("ch"); // 获取表格对象
for (var i = 0; i < tabobj.rows.length; i++) {
var row = tabobj.rows[i];
for (var j = 0; j < row.cells.length; j++) {
var cell = row.cells[j];
console.log(cell.innerHTML); // 获取单元格中的值
}
}
// 创建表格
var table = document.createElement("table"); // 创建表格对象
var tbody = document.createElement("tbody"); // 创建表格体对象
table.appendChild(tbody); // 将表格体添加到表格中
var row = document.createElement("tr"); // 创建表格行对象
var cell = document.createElement("td"); // 创建表格单元格对象
cell.innerHTML = "测试"; // 设置单元格中的值
row.appendChild(cell); // 将单元格添加到表格行中
tbody.appendChild(row); // 将表格行添加到表格体中
document.body.appendChild(table); // 将表格添加到文档中
</script>
```
本文介绍了使用 Javascript 实现表格操作的方法,包括获取表格值和创建表格。这些方法可以应用于各种 Web 开发项目中,以实现动态更新和交互效果。