JavaScript to achieve dynamic table effect

This article shares the specific code for JavaScript to achieve dynamic table effects for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Table</title>
    <style>
        .bigDiv{
            width: 600px;
            margin: 50px auto;
        }
        table{
            border: solid black 2px;
            width: 500px;
            /*Borders will be merged into a single border*/
            border-collapse: collapse;
        }
        th{
            background-color: darkgray;
            /*Bold font for table header*/
            font-weight: bold;
            /*Font color #ffffff: white*/
            color: #ffffff;
        }
        th,td{
            border: 1px solid black;
            /* Specify width and height behavior. Specifying the width and height of an element (minimum/maximum properties) applies to the width and height of the box*/
            box-sizing: content-box;
            text-align: center;
            /*Specify width and height*/
            width: 50px;
            height: 30px;
            font-size: 14px;
        }
        .but{
            width: 150px;
            margin: 5px 400px;
            /*Make all child elements of the flexbox model object have the same length and ignore the content inside them*/
            display: flex;
            /*Leave space around each item in the <div> element of the flexbox object*/
            justify-content: flex-end;
        }
    </style>
</head>
<body>
<div class="bigDiv">
<table align="center">
    <thead>
    <tr>
        <th>Serial number</th>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Contact number</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Xiaoyao</td>
        <td>18</td>
        <td>Male</td>
        <td>12354546</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Xiaobai</td>
        <td>19</td>
        <td>Female</td>
        <td>252323523</td>
    </tr>
    </tbody>
</table>
<div class="but">
    <button type="button" onclick="addRow()">Add a row</button>
    <button type="button" onclick="saveData()">Save data</button>
</div>
</div>
<script>
    var id;
    var name;
    var age;
    var sex;
    var phone;
    var tdArr = new Array();
    function addRow() {
        let tbodyObj = document.getElementsByTagName("tbody")[0];
        let trObj = document.createElement("tr");
        tbodyObj.appendChild(trObj);
        //Create 5 td
        for (let i = 0; i < 5; i++) {
            let tdObj = document.createElement("td");
            trObj.appendChild(tdObj);
            //Create input box object let inputObj = document.createElement("input");
            //Set the id attribute of the input object inputObj.setAttribute("id",i);
            //Add a focus loss event to each input box inputObj.addEventListener("blur",function () {
                switch (this.id) {
                    case "0":
                        id=this.value;
                        break;
                    case "1":
                        name=this.value;
                        break;
                    case "2":
                        age=this.value;
                        break;
                    case "3":
                        sex=this.value;
                        break;
                    case "4":
                        phone=this.value;
                        break;
                }
            });

            //Hide the input border when the input is not clicked inputObj.style.border="0";
            //Hide the border when clicking input inputObj.style.outline="none";
            //Set the input box width inputObj.style.width="80px";
            //Set the input box height inputObj.style.height="25px";
            //Set the input box's margin to 0
            inputObj.style.margin="0";
            //Add td tdObj.appendChild(inputObj);
            //Add tdObj to tdArr tdArr.push(tdObj);
        }
    }
    function saveData() {
        tdArr[0].innerHTML=id;
        tdArr[1].innerHTML=name;
        tdArr[2].innerHTML=age;
        tdArr[3].innerHTML=sex;
        tdArr[4].innerHTML=phone;
        tdArr.length=0;
    }
</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Detailed explanation of how to implement dynamic tables in JavaScript
Detailed explanation of dynamically generated tables using javascript
JavaScript to achieve dynamic color change of table
JavaScript to implement a simple dynamic table
JavaScript to dynamically generate tables on web pages
Example of dynamically generating a table with JavaScript
Detailed explanation of how to generate dynamic tables and dynamic effects using JavaScript

<<: A brief discussion on the solution of Tomcat garbled code and port occupation

>>: Example of MySQL auto-increment ID exhaustion