使用 JavaScript 创建表

野性酷女 2023-09-30 12:04 4阅读 0赞

JavaScript 编程语言允许我们创建和操作[DOM][]（文档对象模型）元素。它为我们提供了更大的灵活性，并使每个人都可以更轻松地使用 DOM，尤其是如果您是后端开发人员。

有两种方法可以将 HTML 元素（如表格）添加到 HTML 文档中，第一种是将 HTML 表格标记直接添加到我们的 HTML 网页中，第二种方法是在我们的 JavaScript 代码中创建整个表格。第二个选项是最流行的创建表并将其添加到 DOM 的方法。

但在深入了解如何使用 JavaScript 创建表格之前，让我们首先直观地了解用于创建表格的各种表格标签以及每个标签的确切含义。这将为您提供表格的可视化表示，使您更容易理解本文后面的代码部分。

### [用于在 HTML 中创建表格的各种标签][HTML] ###

下面是用于在 HTML 中创建表格的标签列表。

![c3295e7c641b8b329be514e3d729e7f6.png][]

1.  `table`: `table`HTML 标记代表 HTML 中的整个表格。这是表格的起始标记，其中与表格相关的所有其他标记（如`thead`、`tr`、`td`等）将根据您要如何构造表格而使用。
2.  `thead`:`thead`代表表格标题。此标签用于向表格添加标题。它通常代表表格的第一行。要在标签内添加数据`thead`，我们使用`th`标签。如果您不想在表格中添加标题，则可以跳过该`thead`标签。
3.  `tbody`:`tbody`表体的代表。此标记表示表格的整个主体或内容。
4.  `tfoot`:`tfoot`代表表格页脚。它通常代表表格的最后一行。这个标签是可选的。我们不经常使用这个标签。
5.  `tr`：`tr`代表表格行。这表示表格的整行。要将数据插入表格的标题、正文或页脚内，我们首先必须创建一行，然后在该行内，我们可以在`td`标签的帮助下插入数据。
6.  `th`:`th`仅在`thead`标签内使用。它表示标题行的单个单元格。它使表格的标题以粗体格式显示。
7.  `td`：`td`代表表格数据。它代表表格的单个单元格。它类似于`th`，但唯一的区别是`th`仅在`thead`标签内部使用，而`td`在其他地方使用。该`td`标签可以与`tbody`和`tfoot`标签一起使用。

如果您将所有这些标签组合成嵌套形式，即一个在另一个中，那么这就是[表格][Link 1]创建后的样子。

![006045c7a7466892090d762556e8e167.png][]

红色边框代表整个表格。在这里面，我们有 3 个标签，表头 ( `thead`)、表体 ( `tbody`) 和表尾 ( `tfoot`)，它们用绿色边框表示。要在这三个标签中插入数据，我们首先必须在标签的帮助下创建一行`tr`。此行用黄色边框表示。然后，要将数据插入表头，我们使用`th`标签，而要将数据插入表体或表尾，我们使用`td`标签。它在灰色的帮助下显示。

### [使用 JavaScript 创建表][JavaScript] ###

要使用 JavaScript 创建 HTML 元素，我们必须使用一个名为的方法，该方法`document.createElement()`以字符串作为参数的标签名称。例如，我们想创建一个表，所以我们将字符串`table`作为输入传递给`createElement()`方法`document.createElement('table')`。

现在让我们完全使用 JavaScript 创建下表。

<table> 
 <thead> 
  <tr> 
   <th>Sr. No.</th> 
   <th>Name</th> 
   <th>Company</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1.</td> 
   <td>James Clerk</td> 
   <td>Netflix</td> 
  </tr> 
  <tr> 
   <td>2.</td> 
   <td>Adam White</td> 
   <td>Microsoft</td> 
  </tr> 
 </tbody> 
</table>

上表有 4 行。第一行包含所有标题，接下来的三行包含数据。

下面我们有 HTML、CSS 和 JS 代码。在我们的`body`标签中，我们最初没有任何东西。我们将在 JavaScript 中创建表格，最后，我们会将整个表格附加到`body`标签中，以便它在网页上可见。在`style`标签内部，我们为表格提供了一些基本样式。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style>
            table{
                border-collapse: collapse;
                border-spacing: 0;
            }
            th, td{
                padding: 10px 20px;
                border: 1px solid #000;
            }
        </style>
    
    </head>
    <body id="body">
    
        <script src="script.js"></script>  
    </body>
    </html>

要创建表，我们将首先创建`table`标签。然后我们将此标签存储到一个变量`table`中，以便稍后我们可以使用它。同样，我们还将创建`thead`和`tbody`标记并将它们存储在变量中。`thead`然后我们将and附加`tbody`到`table`标签上。

let table = document.createElement('table');
    let thead = document.createElement('thead');
    let tbody = document.createElement('tbody');
    
    table.appendChild(thead);
    table.appendChild(tbody);
    
    // Adding the entire table to the body tag
    document.getElementById('body').appendChild(table);

您必须将在 JavaScript 中创建的表附加或添加到`body`标记中。我们首先必须使用它的 获取 HTML body 标记`id`，然后我们将使用称为`appendChild()`方法的东西附加表格。由于我们已经将表存储在`table`变量中，因此我们只需要将我们作为子项创建的表附加到这个 body 元素。

此时，这就是我们表的结构。

![fdf4f9e0cecf7eae8a51cecbfb56eac6.png][]

要将行和数据添加到我们的表格中，我们将使用该方法创建表格行 ( `tr`)、表格标题 ( `th`) 和表格数据 ( `td`) 标签`createElement()`，然后我们将借助`innerHTML`属性将数据添加到这些元素中。

// Creating and adding data to first row of the table
    let row_1 = document.createElement('tr');
    let heading_1 = document.createElement('th');
    heading_1.innerHTML = "Sr. No.";
    let heading_2 = document.createElement('th');
    heading_2.innerHTML = "Name";
    let heading_3 = document.createElement('th');
    heading_3.innerHTML = "Company";
    
    row_1.appendChild(heading_1);
    row_1.appendChild(heading_2);
    row_1.appendChild(heading_3);
    thead.appendChild(row_1);
    
    
    // Creating and adding data to second row of the table
    let row_2 = document.createElement('tr');
    let row_2_data_1 = document.createElement('td');
    row_2_data_1.innerHTML = "1.";
    let row_2_data_2 = document.createElement('td');
    row_2_data_2.innerHTML = "James Clerk";
    let row_2_data_3 = document.createElement('td');
    row_2_data_3.innerHTML = "Netflix";
    
    row_2.appendChild(row_2_data_1);
    row_2.appendChild(row_2_data_2);
    row_2.appendChild(row_2_data_3);
    tbody.appendChild(row_2);
    
    
    // Creating and adding data to third row of the table
    let row_3 = document.createElement('tr');
    let row_3_data_1 = document.createElement('td');
    row_3_data_1.innerHTML = "2.";
    let row_3_data_2 = document.createElement('td');
    row_3_data_2.innerHTML = "Adam White";
    let row_3_data_3 = document.createElement('td');
    row_3_data_3.innerHTML = "Microsoft";
    
    row_3.appendChild(row_3_data_1);
    row_3.appendChild(row_3_data_2);
    row_3.appendChild(row_3_data_3);
    tbody.appendChild(row_3);

使用该属性插入数据后`innerHTML`，我们将该数据附加到它们各自的行中。例如，首先，我们将标题（即`heading_1`、`heading_2`、`heading_3`）添加到`row_1`。然后我们将我们的第一行，即 ，附加`row_1`到`thead`标签作为一个孩子。

同样，我们正在创建另外 2 行，即`row_2`，`row_3`然后将 ( `row_2_data_1`, `row_2_data_2`, `row_2_data_3`) 和 ( `row_3_data_1`, `row_3_data_2`, `row_3_data_3`) 变量分别附加到这 2 行。最后，我们将这两行附加到`tbody`标签中，因为它是儿童的。

现在，这就是表格及其 HTML 结构在开发人员控制台中的样子。

![7503c63b1deab3b79857c2474414492e.png][]

左边是表格，右边是浏览器生成的代码。您可以根据您希望表格的外观自定义 js 代码。为了实现这一点，我们只使用了 3 个 JavaScript 方法（、、、`createElement()`） 。`innerHTML``appendChild()`

[DOM]: https://www.w3schools.com/js/js_htmldom.asp
[HTML]: https://www.delftstack.com/howto/javascript/create-table-javascript/#various-tags-used-to-create-a-table-in-html
[c3295e7c641b8b329be514e3d729e7f6.png]: https://img-blog.csdnimg.cn/img_convert/c3295e7c641b8b329be514e3d729e7f6.png
[Link 1]: https://www.w3schools.com/jsref/dom_obj_table.asp
[006045c7a7466892090d762556e8e167.png]: https://img-blog.csdnimg.cn/img_convert/006045c7a7466892090d762556e8e167.png
[JavaScript]: https://www.delftstack.com/howto/javascript/create-table-javascript/#create-a-table-using-javascript
[fdf4f9e0cecf7eae8a51cecbfb56eac6.png]: https://img-blog.csdnimg.cn/img_convert/fdf4f9e0cecf7eae8a51cecbfb56eac6.png
[7503c63b1deab3b79857c2474414492e.png]: https://img-blog.csdnimg.cn/img_convert/7503c63b1deab3b79857c2474414492e.png