使用 JavaScript 创建表_js创建表格

作者：盐析白兔 | 2024-07-27 04:40:41

踩

js创建表格

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

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

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

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

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

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

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

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

使用 JavaScript 创建表

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

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

Sr. No.	Name	Company
1.	James Clerk	Netflix
2.	Adam White	Microsoft

上表有 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 元素。

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

要将行和数据添加到我们的表格中，我们将使用该方法创建表格行 ( 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 结构在开发人员控制台中的样子。

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/888708