### JavaScript 实现动态增加删除表格行（兼容IE/FF）
#### 概述
本文将详细介绍如何使用JavaScript来实现在Web页面上动态增加和删除表格行的功能，并确保该功能在Internet Explorer (IE) 和 Firefox (FF) 等浏览器中能够正常运行。此技术对于构建具有高度交互性和响应性的用户界面非常有用。
#### 核心知识点
### 1. DOM 操作基础
- **DOM (Document Object Model)** 是一种处理 HTML 和 XML 文档的标准方式。
- **插入新行**：
- `insertRow(index)` 方法用于在 `<table>` 元素中指定的位置插入新行。
- **删除行**：
- `removeChild(node)` 方法用于从父节点中移除子节点。
- **获取和设置元素内容**：
- `innerHTML` 属性可以用来获取或设置一个元素的 HTML 内容。
### 2. JavaScript 函数详解
#### 2.1 `addLine` 函数
- **参数**: `obj` —— 表示触发事件的对象，通常是按钮。
- **逻辑概述**:
1. 获取当前按钮所在的行 (`objSourceRow`) 和表 (`objTable`)。
2. 如果按钮的值为“增加”：
- 增加行索引 `rowIndex`。
- 使用 `insertRow(rowIndex)` 插入新行。
- 通过 `insertCell()` 创建单元格，并填充内容。
3. 如果按钮的值为“删除”：
- 从表中删除当前行。
- 减少行索引 `rowIndex`。
- **示例代码**:
```javascript
function addLine(obj) {
var objSourceRow = obj.parentNode.parentNode;
var objTable = obj.parentNode.parentNode.parentNode.parentNode;
if (obj.value === '增加') {
rowIndex++;
var objRow = objTable.insertRow(rowIndex);
var objCell;
objCell = objRow.insertCell(0);
objCell.innerHTML = " ";
objCell = objRow.insertCell(1);
objCell.innerHTML = objSourceRow.cells[1].innerHTML;
objCell = objRow.insertCell(2);
objCell.innerHTML = objSourceRow.cells[2].innerHTML.replace(/增加/, '删除');
} else {
objTable.lastChild.removeChild(objSourceRow);
rowIndex--;
}
}
```
#### 2.2 `removeLine` 函数
- **功能**: 目前未实现具体逻辑，预留用于后续扩展。
- **示例代码**:
```javascript
function removeLine() {}
```
### 3. 兼容性考虑
- **IE 和 FF 的差异**：
- IE 和 FF 在 DOM 操作上有细微差别，特别是早期版本。
- 需要特别注意的是，IE 对某些 DOM 方法的支持不如其他浏览器全面。
- **解决方案**：
- 使用标准化的方法，如 `insertRow()` 和 `removeChild()`，这些方法在现代浏览器中有较好的支持。
- 对于不支持的方法或属性，提供兼容性代码或者使用库如 jQuery 来简化操作。
### 4. 示例代码分析
#### 4.1 HTML 结构
- **表单结构**：
- 包含一个表格，表格中有用于输入数据的单元格以及用于触发增加和删除操作的按钮。
- **示例代码**:
```html
<table width="400" border="0">
<tr>
<td>基本信息</td>
<td>
<select name="select">
<option value="" selected>选择</option>
<option value="1">第一</option>
<option value="2">其次</option>
</select>
</td>
<td>
<input name="basicinfo" type="text" id="basicinfo" />
<input name="add" type="button" id="add" value="增加" onClick="addLine(this)" />
</td>
</tr>
<!-- 更多行... -->
</table>
```
### 5. 进一步拓展
- **增强功能**：
- 可以添加验证机制，确保数据的有效性。
- 提供更多的用户交互，如提示信息等。
- **样式优化**：
- 使用 CSS 来美化表格的外观。
- 例如，可以设置行高、边框样式等。
### 总结
通过上述介绍，我们了解到使用 JavaScript 实现动态增加删除表格行的方法，并且能够确保其在不同的浏览器中都能正常工作。这种方法不仅提高了网页的交互性，还增强了用户体验。此外，通过合理的代码设计和兼容性处理，可以在不同版本的浏览器中达到良好的表现效果。
