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
The perfect solution for forgetting the password in mysql8.0.19
Recommended reading: MySQL 8.0.19 supports accoun...
CentOS 7.x docker uses overlay2 storage method
Edit /etc/docker/daemon.json and add the followin...
Vue implements a shopping cart that can change the shopping quantity
This article shares with you how to use Vue to ch...
Introduction to Vue life cycle and detailed explanation of hook functions
Table of contents Vue life cycle introduction and...
MySQL slow query optimization: the advantages of limit from theory and practice
Many times, we expect the query result to be at m...
mysql 8.0.15 winx64 decompression version graphic installation tutorial
Every time after installing the system, I have to...
Without too much code, you can use hyperlinks to implement simple and beautiful custom check boxes
Today I suddenly thought that the styles of check ...
CSS mimics remote control buttons
Note: This demo is tested in the mini program env...
SQL query for users who have placed orders for at least seven consecutive days
Create a table create table order(id varchar(10),...
JavaScript to achieve dynamic table effect
This article shares the specific code for JavaScr...
Detailed explanation of the practical use of HTML table layout
When is the table used? Nowadays, tables are gene...
Analysis of Linux Zabbix custom monitoring and alarm implementation process
Target Display one of the data in the iostat comm...
Use of vuex namespace
Table of contents Since Vuex uses a single state ...
Docker solves the problem that the terminal cannot input Chinese
Preface: One day, I built a MySQL service in Dock...
Solution to the problem that the server cannot remotely connect to the database when installing the Pagoda Panel
I am planning to build my own website, so I took ...