Dynamically add tables in HTML_PowerNode Java Academy

Without further ado, I will post the code for you directly. The specific code is as follows:

<html>  
    <head><title>Table</title></head>  
    <body>  
        <table border="1">  
            <thead>  
                <tr>  
                    <td>First Name</td>  
                    <td>Last Name</td>  
                    <td> </td>  
                </tr>  
            <thead>  
            <tbody id="tb">  
                <tr id="1st">  
                    <td>张</td>  
                    <td>Three</td>  
                    <td><input type="button" value="Add" onclick="add()">   
                    <input type="button" value="Del" onclick="del(this)"></td>  
                </tr>  
            </tbody>  
        </table>  
    </body>  
</html>  
<script>  
    function add() {  
        var trObj = document.createElement("tr");  
        trObj.id = new Date().getTime();  
        trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'> <input type='button' value='Del' onclick='del(this)'></td>";  
        document.getElementById("tb").appendChild(trObj);  
    }  
    function del(obj) {  
        var trId = obj.parentNode.parentNode.id;  
        var trObj = document.getElementById(trId);  
        document.getElementById("tb").removeChild(trObj);  
    }  
</script>

In the above code, we first construct a table in the body. To facilitate subsequent operations, we add thead and tbody tags to the table. The thead tag indicates the table header, and the tbody tag indicates the table body.

The table in the example has three columns: the first column is first name, the second column is last name, and the third column is the operation column.

The Operation column contains two operations, one is to add a row to the table, and the other is to delete the current row. The operations of adding and deleting rows are bound to two buttons respectively. When the button is clicked, the corresponding operations of adding and deleting rows are triggered.

Add Row Method

function add() {  
        var trObj = document.createElement("tr");  
        trObj.id = new Date().getTime();  
        trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'> <input type='button' value='Del' onclick='del(this)'></td>";  
        document.getElementById("tb").appendChild(trObj);  
    }

The first line creates a tr element, that is, creates a table row.

The second line, trObj.id = new Date().getTime(); adds an id attribute to this line and assigns a value to the attribute, taking the milliseconds of the current system. This is mainly needed when deleting.

The third line, trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'>

<input type='button' value='Del' onclick='del(this)'></td> "; Assign values to the table rows, and use the innerHTMML attribute to set the HTML code content between the <tr> tag and the </tr> tag, which is the row content to be added.

The fourth line, document.getElementById("tb").appendChild(trObj); adds the created table row to the table body.

Delete Row Method

function del(obj) {  
    var trId = obj.parentNode.parentNode.id;  
    var trObj = document.getElementById(trId);  
    document.getElementById("tb").removeChild(trObj);  
}

A parameter is passed in the delete method. In the add row method, we can see that the this parameter is passed in the delete method del. The this in the page code refers to the current HTML element, that is, the <input> field where this is located.

The first line, var trId = obj.parentNode.parentNode.id ; gets the id of the parent node of the parent node of the current element, that is, the id of the row to be deleted.

The second line, var trObj = document.getElementById(trId); gets the row element to be deleted.

The third line, document.getElementById("tb").removeChild(trObj); removes the row in the table body.

flaw

The above code basically implements the function of dynamically adding and deleting rows in the table, but the code still has flaws, mainly in the following two points:

1 The table width changes before and after adding rows

Add front