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
Detailed explanation of the specific use of the ENV instruction in Dockerfile
1. The ENV instruction in the Dockerfile is used ...
JavaScript to achieve progress bar effect
This article example shares the specific code of ...
Vue implements simple slider verification
This article example shares the implementation of...
How to solve the problem of too many open files in Linux
The cause is that the process opens a number of f...
MySQL table field time setting default value
Application Scenario In the data table, the appli...
Introduction to CSS BEM Naming Standard (Recommended)
1 What is BEM Naming Standard Bem is the abbrevia...
Solve the problem of MySQL server actively disconnecting when there is no operation timeout
When we use the MySQL service, under normal circu...
Detailed analysis of the chmod command to modify file permissions under Linux
Use the Linux chmod command to control who can ac...
An article teaches you how to implement VUE multiple DIVs and button binding enter events
There is currently a requirement that an operatio...
7 native JS error types you should know
Table of contents Overview 1. RangeError 2. Refer...
A simple example of using Vue3 routing VueRouter4
routing vue-router4 keeps most of the API unchang...
How to set npm to load packages from multiple package sources at the same time
Table of contents 1. Build local storage 2. Creat...
The table tbody in HTML can slide up and down and left and right
When the table header is fixed, it needs to be di...
How to quickly add columns in MySQL 8.0
Preface: I heard a long time ago that MySQL 8.0 s...
Memcached method for building cache server
Preface Many web applications store data in a rel...