### JavaScript 获取 Table 行列值的方法
在网页开发过程中，我们经常会遇到需要处理表格数据的情况。HTML 中的 `<table>` 元素是用来显示表格数据的标准方式之一，而使用 JavaScript 来操作这些表格中的数据则非常常见。下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格（`<table>`）中的行（`<tr>`）和列（`<td>`）的值。
#### 核心知识点解析
### 一、HTML 结构解析
让我们来分析一下给定的 HTML 代码结构：
```html
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
<tr onclick="c1(this);" bgcolor="#cccccc">
<td><input type="text" value="11"></td>
<td><input type="text" value="12"></td>
</tr>
<!-- 更多的 <tr> 元素 -->
</table>
```
这里的 `<table>` 标签定义了一个表格，并且每个 `<tr>` 元素代表一行，而 `<td>` 元素代表单元格。在这个例子中，每个单元格都包含一个 `<input type="text">` 元素，用来显示具体的数值。
### 二、JavaScript 逻辑分析
接下来，我们来看一下 JavaScript 部分的代码实现：
```javascript
var selectedTr = null;
function c1(obj) {
obj.style.backgroundColor = 'blue'; // 被选中的行背景色变为蓝色；
if (selectedTr != null) selectedTr.style.removeAttribute("backgroundColor");
if (selectedTr == obj) selectedTr = null; // 如果再次点击同一行，则取消选择
else selectedTr = obj;
}
// 获取所选行的第一个单元格的值
function check() {
if (selectedTr != null) {
var str = selectedTr.cells[0].childNodes[0].value;
document.getElementById("lab").innerHTML = str;
} else {
alert("请选择一行");
}
}
// 删除所选行
function del() {
if (selectedTr != null) {
if (confirm("确认要删除吗？")) {
alert(selectedTr.cells[0].childNodes[0].value);
var tbody = selectedTr.parentNode;
tbody.removeChild(selectedTr);
}
} else {
alert("请选择一行");
}
}
```
#### 1. `c1` 函数解析
该函数的作用是为表格中的每一行添加点击事件。当点击某一行时，将这一行设置为被选中的状态，并改变其背景颜色；如果再次点击已选中的行，则取消选择。
#### 2. `check` 函数解析
该函数用于获取当前被选中行的第一个单元格中的值，并将其显示在页面上。如果没有任何行被选中，则会弹出提示消息。
#### 3. `del` 函数解析
该函数用于删除当前被选中的行。首先会询问用户是否确定要删除，如果用户点击“确定”，则从父节点中移除该行；如果没有行被选中，则会弹出提示消息。
### 三、综合运用示例
假设我们要根据用户的选择动态地修改表格内容或进行其他操作，例如：根据用户的输入自动计算总和等，可以通过以下方式来扩展上述功能：
1. **增加计算功能**：可以在 `check` 函数中加入计算逻辑，比如统计选中行所有单元格的数值之和。
2. **响应式设计**：为了让表格在不同设备上都能正常显示，可以考虑使用 CSS 媒体查询或框架如 Bootstrap 来实现响应式布局。
3. **动态添加行**：可以添加一个按钮，点击后可以动态地向表格中添加一行。
4. **表单验证**：如果表格用于收集用户数据，还可以添加表单验证功能，确保用户输入的数据格式正确。
通过以上解析和扩展，我们可以更深入地理解如何使用 JavaScript 操作 HTML 表格中的数据，并能够灵活地应对各种实际应用场景。
- 1
- 2
- 3
- 4
- 5
前往页