在 JavaScript 中动态创建表格、按钮和 DIV

冷不防 2023-10-01 18:58 8阅读 0赞

使用 document.createElement() 方法，您可以在 JavaScript 中动态创建指定的 HTML 元素。创建后，您可以将元素插入（或添加）到您的网页，或将其添加到预定义元素或[动态创建的元素][Link 1]中。实际上，您可以使用此方法动态创建整个表单。在本文中，我将向您展示如何使用“createElement()”方法动态创建 HTML 表格，并使用从数组中提取的数据填充表格。

表单通常不仅包含表格，还包含其他元素。例如，我们需要一个按钮来从表中提取数据并提交。因此，除了 <table> 之外，我还将向您展示如何使用createElement()方法创建 Input 类型的按钮元素以及DIV元素（将用作容器） 。

也就是说，使用我们将实际创建三个元素的方法，在这个例子中是动态的。

最后，我将向您展示如何遍历动态创建的表以从每个单元格中提取所有值并提交值。

你为什么要这样做，取决于你的选择。您可以决定在设计时添加页面上的所有元素，或者您可以在运行时创建和插入 HTML 元素，即动态使用createElement()方法。

**另请阅读：** [如何使用 JavaScript 从 HTML 表中读取数据][JavaScript _ HTML]

所以，让我们从我们的例子开始。

**带有脚本的标记**

我没有在设计时添加任何控件。因此，标记部分没有太多内容。我将在运行时在 JavaScript 中创建和添加的所有元素。

正文 onload 事件调用一个名为CreateTable()的 JavaScript 函数。

<!DOCTYPE html>
    <html>
        <head>
            <title>JavaScript document.createElement Method Example</title>
            <style>
                table, th, td
                {
                    font: 17px Calibri;
                    border: solid 1px #DDD;
                    border-collapse: collapse;
                    padding: 2px 3px;
                    text-align: center;
                    margin: 10px 0;
                }
                th {
                    font-weight:bold;
                }
            </style>
        </head>
        <body onload="CreateTable();">
    
        </body>
    
        <script>
            function CreateTable() {
    
                // CREATE DYNAMIC TABLE.
                var table = document.createElement('table');
    
                // SET THE TABLE ID. 
                // WE WOULD NEED THE ID TO TRAVERSE AND EXTRACT DATA FROM THE TABLE.
                table.setAttribute('id', 'empTable');
    
                var arrHead = new Array();
                arrHead = ['Emp. ID', 'Emp.Name', 'Designation'];
    
                var arrValue = new Array();
                arrValue.push(['1', 'Green Field', 'Accountant']);
                arrValue.push(['2', 'Arun Banik', 'Project Manager']);
                arrValue.push(['3', 'Dewane Paul', 'Programmer']);
    
                var tr = table.insertRow(-1);
    
                for (var h = 0; h < arrHead.length; h++) {
                    var th = document.createElement('th');              // TABLE HEADER.
                    th.innerHTML = arrHead[h];
                    tr.appendChild(th);
                }
    
                for (var c = 0; c <= arrValue.length - 1; c++) {
                    tr = table.insertRow(-1);
    
                    for (var j = 0; j < arrHead.length; j++) {
                        var td = document.createElement('td');          // TABLE DEFINITION.
                        td = tr.insertCell(-1);
                        td.innerHTML = arrValue[c][j];                  // ADD VALUES TO EACH CELL.
                    }
                }
    
                // NOW CREATE AN INPUT BOX TYPE BUTTON USING createElement() METHOD.
                var button = document.createElement('input');
    
                // SET INPUT ATTRIBUTE 'type' AND 'value'.
                button.setAttribute('type', 'button');
                button.setAttribute('value', 'Read Table Data');
    
                // ADD THE BUTTON's 'onclick' EVENT.
                button.setAttribute('onclick', 'GetTableValues()');
    
                // FINALLY ADD THE NEWLY CREATED TABLE AND BUTTON TO THE BODY.
                document.body.appendChild(table);
                document.body.appendChild(button);
            }
    
            function GetTableValues() {
    
                var empTable = document.getElementById('empTable');
    
                // CREATE A DIV WHERE WE'LL SHOW THE TABLE WITH DATA.
                var div = document.createElement('div');
                div.innerHTML = "";
                div.innerHTML = '<br />';
    
                // TRAVERSE THROUGH THE TABLE TO XTRACT CELL VALUES.
                for (var r = 1; r <= empTable.rows.length - 1; r++) {        // EACH ROW IN THE TABLE.
                    // EACH CELL IN A ROW.
                    for (c = 0; c <= empTable.rows[r].cells.length - 1; c++) {
    
                        // ADD DATA TO THE DIV.
                        div.innerHTML = div.innerHTML + ' ' +
                                empTable.rows[r].cells[c].innerHTML;
    
                    }
                    div.innerHTML = div.innerHTML + '<br />';
                }
                document.body.appendChild(div);     // APPEND (ADD) THE CONTAINER TO THE BODY.
            }
        </script>
    </html>

我已经使用document.createElement()方法动态地创建了这个示例表单中的每个元素。所以，我知道这个方法有多么强大和有用，你可以根据你的要求创建任意数量的元素。而且它很快。

**相关：** [使用 jQuery 动态地将行添加到表中][jQuery]

您也可以尝试该方法并创建其他元素。例如，您可以创建和添加 HTML <button> 标签，而不是输入类型按钮 (<input>)。这就是你的做法。

var button = document.createElement('button');          // CREATE THE BUTTON.
    var bText = document.createTextNode('Submit');          // CREATE TEXT FOR THE BUTTON
    button.appendChild(bText);                              // ADD THE TEXT TO THE BUTTON.

创建 <button> 标记后，将onclick事件属性添加到按钮。

button.setAttribute('onclick', 'GetTableValues()');

其他一切都将保持不变。

而已。谢谢阅读。☺

[Link 1]: https://www.encodedna.com/2013/07/dynamically-add-remove-textbox-control-using-jquery.htm
[JavaScript _ HTML]: https://www.encodedna.com/javascript/how-to-read-data-from-html-table-using-javascript.htm
[jQuery]: https://www.encodedna.com/jquery/dynamically-add-rows-to-table-using-jquery.htm