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, The third line, The fourth line, 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, The second line, The third line, 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
After adding a row
After adding rows, the table columns become wider 2 The Chinese text on the default page opened by the browser is garbled
You need to set the character encoding to modify the page encoding format before it can be displayed normally |
<<: 17 excellent web designs carefully crafted by startups
>>: Detailed explanation of how Vue returns values to dynamically generate forms and submit data
Recommend
Example of how to display a default image when an image does not exist in HTML
An image link <img src="" /> I wa...
Briefly describe how to install Tomcat image and deploy web project in Docker
1. Install Tomcat 1. Find the tomcat image on Doc...
Create a new user in Linux and grant permissions to the specified directory
1 Create a user and specify the user's root p...
Detailed explanation of creating stored procedures and functions in mysql
Table of contents 1. Stored Procedure 1.1. Basic ...
Detailed explanation of the use of HTML canvas and page storage technology in JavaScript
Table of contents 1. JavaScript uses canvas in HT...
What hidden attributes in the form can be submitted with the form
The form elements with visibility=hidden and displ...
Detailed explanation of VUE responsiveness principle
Table of contents 1. Responsive principle foundat...
MySQL database advanced query and multi-table query
MySQL multi-table query Add a worksheet -- User t...
nginx automatically generates configuration files in docker container
When a company builds Docker automated deployment...
HTML end tag issue and w3c standard
According to the principles of W3C, each start tag...
How to set the number of mysql connections (Too many connections)
During the use of mysql, it was found that the nu...
CnBlogs custom blog style sharing
After spending half the night on it, I finally ma...
How to implement page jump in Vue project
Table of contents 1. Create a vue-cli default pro...
Detailed explanation of Docker working mode and principle
As shown in the following figure: When we use vir...
How to hide the border/separation line between cells in a table
Only show the top border <table frame=above>...