【Java 进阶篇】JavaScript 动态表格案例

深藏阁楼爱情的钟 2024-02-21 10:19 13阅读 0赞

![在这里插入图片描述][ee6246a97e76456ea2a96231b3fde401.png]

在这篇博客中，我们将深入了解JavaScript如何创建和操作动态表格。我们将从头开始构建一个动态表格，并逐步添加各种功能，使其能够实现数据的添加、删除和编辑。这个示例将有助于理解如何在前端开发中使用JavaScript创建交互性强大的表格。

### 准备工作 ###

在开始之前，确保您已经创建了一个HTML文件并添加了以下初始结构：

<!DOCTYPE html>
    <html>
    <head>
        <title>JavaScript Dynamic Table</title>
    </head>
    <body>
        <h1>Dynamic Table Example</h1>
    
        <table id="myTable">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Action</th>
            </tr>
        </table>
    
        <button id="addRow">Add Row</button>
    </body>
    </html>

我们的HTML文件包含一个空的表格和一个"Add Row"按钮。

### 创建基本的动态表格 ###

首先，我们需要添加JavaScript代码来创建基本的动态表格。我们将使用DOM操作来实现这一点。

在这段代码中，我们首先获取了表格元素，然后使用`createTHead`方法创建表头，并插入表头行和表头单元格。我们为表头添加了"Name"、"Age"和"Action"列。

接下来，我们来创建一个用于添加新行的函数：

在这里，我们创建了一个名为`addRow`的函数，它用于添加新的行。在新的行中，我们插入了文本输入框（用于输入姓名）、数字输入框（用于输入年龄）和一个"Delete"按钮，点击该按钮将删除该行。

还添加了一个点击事件监听器，当"Add Row"按钮被点击时，将调用`addRow`函数。

### 删除行 ###

下一步是实现删除行的功能。我们需要创建一个`deleteRow`函数，它将在点击"Delete"按钮时触发。

在这个函数中，我们首先获取到"Delete"按钮的父元素（即行），然后使用`deleteRow`方法删除该行。

### 编辑行 ###

要使表格更加交互性，让我们添加一个编辑功能。我们将允许用户点击某一行的"Edit"按钮来编辑该行的内容。我们需要在`addRow`函数中为每一行添加一个"Edit"按钮，并创建一个用于保存编辑内容的函数。

在这个函数中，我们首先获取了行中的输入框和"Edit"按钮。如果"Edit"按钮文字本身不同，我们将输入框的`disabled`属性设置为`true`，这将使输入框变为只读状态，同时将"Edit"按钮的文本更改为"Save"，以表示当前用户正在编辑。

如果用户再次点击"Save"按钮，我们将取消输入框的只读状态，使用户可以编辑文本，并将"Save"按钮的文本更改为"Edit"，以表示用户完成了编辑。

接下来，我们需要更新`addRow`函数，以添加"Edit"按钮并为其添加点击事件监听器：

在这里，我们创建了"Edit"按钮，并为其添加了点击事件监听器，以便在用户点击按钮时调用`saveRow`函数。此外，我们也调整了`addRow`函数，以使用`createElement`方法创建输入框和按钮，然后将它们附加到对应的单元格中。

现在，用户可以通过点击"Edit"按钮来编辑每一行的内容。

### 总结 ###

在这篇博客中，我们从头开始创建了一个JavaScript动态表格。我们了解了如何添加新行、删除行和编辑行，使表格更加交互性。这个案例展示了如何使用JavaScript DOM操作来创建强大的前端功能。

这只是一个起点，您可以进一步扩展这个示例，添加更多功能，如数据验证、排序、筛选等，以满足特定的需求。希望这篇博客对您在前端开发中使用JavaScript创建动态表格有所帮助。如果您有任何问题或需要更多帮助，请随时留言。

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[ee6246a97e76456ea2a96231b3fde401.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/003c8ca9c8f541dfaa065d8c0157725c.png