在介绍Js实现动态添加和删除表格行（Table Row）的知识点之前，先要了解HTML中的表格（Table）结构以及JavaScript基础操作。HTML中的表格主要由`<table>`标签构成，并包含`<tr>`标签表示的行（Row）和`<td>`标签表示的单元格（Cell）。要动态地在网页上添加或删除表格行，通常会用到JavaScript提供的DOM（Document Object Model）操作方法。
知识点一：HTML表格（Table）的结构基础
- `<table>`：用来创建表格的基本标签。
- `<tr>`：表示表格中的一行。
- `<td>`：表示行中的单元格，用于存放数据。
- `<th>`：类似于`<td>`，但通常用于表格的标题单元格，并且默认加粗居中显示。
知识点二：JavaScript操作DOM元素
- `document.getElementById()`：通过ID获取页面中的元素。
- `document.createElement()`：创建一个新的元素节点。
- `insertRow()`：`<table>`对象的方法，用于在表格中插入新的行。
- `insertCell()`：`<tr>`对象的方法，用于在行中插入新的单元格。
- `deleteRow()`：`<table>`对象的方法，用于删除指定索引的行。
- `deleteCell()`：`<tr>`对象的方法，用于删除指定索引的单元格。
知识点三：动态添加表格行的实现逻辑
- 使用`onclick`事件触发函数，绑定到“添加”按钮。
- 在事件处理函数中，首先获取需要插入行的表格元素。
- 使用`insertRow()`方法在表格末尾添加新行，并为新行设置ID属性，以便之后操作。
- 对于每一行，根据需要添加的单元格数量调用`insertCell()`方法，为新行创建单元格。
- 给新单元格添加相应内容，如输入框（`<input type="text">`）、文本（`<span>`）、图片（`<img>`）等。
- 保存新行的数据，以便进行后续操作，如编辑或删除。
知识点四：动态删除表格行的实现逻辑
- 通常需要一个“删除”按钮与每一行绑定。
- 通过`onclick`事件处理函数实现删除功能。
- 在事件处理函数中，首先需要获取到触发事件的按钮所在的行。
- 通过表格的索引调用`deleteRow()`方法删除该行。
- 更新界面，确保不会有逻辑错误（比如行索引的连续性）。
知识点五：隐藏元素的应用
- 示例中使用了`<input type="hidden">`标签来保存一些重要的信息，如最后一行的索引值。
- 这种方式可以确保即使用户刷新页面，我们也能从隐藏字段中恢复这些重要数据。
知识点六：自定义JavaScript函数
- 示例中`findObj()`是一个自定义函数，用于查找页面中指定的DOM元素。
- 此函数通过多重循环来在复杂的页面结构中定位具有特定名称或ID的元素。
- 这种方法在没有其他库或框架支持的情况下，可手动实现复杂的DOM查询功能。
知识点七：代码组织和样式的应用
- 示例代码中使用了内联JavaScript，并对HTML元素进行了样式控制。
- 虽然在现代的Web开发中推荐将JavaScript代码单独放到外部文件，并使用CSS来控制样式，但这种内联方式在一些小型或者简单项目中仍然有其使用场景。
- 适当的样式和布局控制能够帮助提高表格的可读性和用户体验。
知识点八：调试和兼容性
- 在实现动态添加删除行功能的过程中，可能会遇到兼容性问题，比如某些浏览器对DOM操作的支持可能有所不同。
- 开发者需要测试不同浏览器下的代码运行情况，使用一些调试工具（如浏览器自带的开发者工具）来确保代码能够正常工作。
以上知识点构成了“Js实现动态添加删除Table行示例”文章的核心内容。读者在理解并掌握了这些知识点后，就能够灵活地运用JavaScript技术来实现各种对表格行的动态操作，提升网页的交互能力。
