在前端开发中，动态增删表格是一个常见的需求。它可以让用户通过添加或删除行来操作数据，并且可以提高用户体验。本文将介绍如何使用JavaScript实现动态增删表格的功能。
HTML 结构
首先，我们需要在HTML中定义一个表格。我们可以使用<table>元素来创建一个表格，然后使用<thead>、<tbody>和<tfoot>元素来分别定义表头、表身和表尾。以下是一个简单的表格示例：
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----------
-----------
-----------
-----
--------
------ --------
----
---------- ----------- -----------------
---------- ----------- ------------------
---------- ----------- ---------------------
---------- ----------- ------------------
------ -------- -------------------------------------
-----
--------
-------
----
--- -------------- -------- --------------------------------
-----
--------
--------在上面的示例代码中，我们为表格的每一列都添加了一个输入框（<input>元素），并且在操作列中添加了一个“删除”链接，点击该链接可以删除当前行。同时，在表格的底部定义了一个“添加一行”链接，点击该链接可以添加新的一行。
JavaScript 实现
接下来我们需要编写JavaScript代码来实现动态增删表格的功能。首先，我们需要获取到表格的相关元素：
var table = document.getElementsByTagName('table')[0];
var tbody = document.getElementById('tb');
var tfoot = table.tFoot;
var clone = tbody.rows[0].cloneNode(true);在上面的代码中，我们使用document.getElementsByTagName()和document.getElementById()方法分别获取到了<table>、<tbody>和<tfoot>元素。然后，我们使用cloneNode()方法克隆了表格中的第一行，以便在需要添加新行时使用。
接下来，我们需要编写两个函数，一个用于添加新行，另一个用于删除行。以下是完整的JavaScript代码：
-- -------------------- ---- ------- -------- -------- - --- ------ - ---------------------- -------------------------- - -------- -------------- - --- --- - -------------------------- -------------------------------- -
在上面的代码中，addRow()函数创建一个新的行，并将其附加到表格的末尾。removeRow()函数从当前行的父节点中删除当前行。
最后，我们需要将这两个函数绑定到相应的事件处理程序上。可以在HTML中给添加一行和删除按钮添加onclick属性，其值分别为addRow()和removeRow(this)。这样，当用户点击这些按钮时，相应的函数就会被调用。
完整示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
-------
-------
----
-----------
-----------
-----------
-----------
-----------
-----
--------
------ --------
----
---------- ----------- -----------------
---------- ----------- ------------------
---------- ----------- ---------------------
---------- ----------- ------------------
------ -------- -------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------