JavaScript to dynamically load and delete tables
|
This article shares the specific code of JavaScript to dynamically load and delete tables for your reference. The specific content is as follows
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
margin: 100px auto;
width: 500px;
border-collapse: collapse;
}
th {
border: 1px solid gray;
background-color: lightgray;
height: 30px;
}
td {
text-align: center;
border: 1px solid gray;
}
</style>
</head>
<body>
<table>
<thead>
<th>Name</th>
<th>Subject</th>
<th>Results</th>
<th>Operation</th>
</thead>
<tbody>
</tbody>
</table>
<script>
var tbd = document.querySelector('tbody');
var info = [{
name: 'kathy',
subject: "javascript",
score: 60
}, {
name: 'Milla',
subject: "java",
score: 100
}, {
name: 'kiki',
subject: "python",
score: 80
}, {
name: 'linda',
subject: "jquery",
score: 70
}]
var info_list = [];
for (var i = 0; i < info.length; i++) {
console.log(info[i]['subject']);
var str = "<tr><td>" + info[i]['name'] + "</td>" + "<td>" + info[i]['subject'] + "</td>" + "<td>" + info[i]['score'] + "</td>" + "<td><a href = javascript:;>Delete</a></td>" + "</tr>";
info_list.push(str);
}
tbd.innerHTML = info_list.join('');
var deletes = document.querySelectorAll('a');
for (var i = 0; i < deletes.length; i++) {
deletes[i].onclick = function() {
tbd.removeChild(this.parentNode.parentNode);
}
}
</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:
|
<<: A Deep Understanding of Angle Brackets in Bash (For Beginners)
>>: Windows Server 2008 64-bit MySQL5.6 installation-free version configuration method diagram
Recommend
VMware and CentOS system installation method to reset the root password
Today's Tasks 1. Choice of Linux distribution...
js Promise concurrent control method
Table of contents question background Idea & ...
Detailed explanation of prototypes and prototype chains in JavaScript
Table of contents Prototype chain diagram Essenti...
Analysis of the implementation process of Nginx high availability solution in production environment
Preparation: 192.168.16.128 192.168.16.129 Two vi...
How to view and terminate running background programs in Linux
Linux task management - background running and te...
JavaScript to achieve Taobao product image switching effect
JavaScript clothing album switching effect (simil...
CSS3 implementation example of rotating only the background image 180 degrees
1. Mental Journey When I was writing the cockpit ...
MySQL 4 common master-slave replication architectures
Table of contents One master and multiple slaves ...
How to use CSS to display multiple images horizontally in the center
Let me first talk about the implementation steps:...
How to connect Django 2.2 to MySQL database
1. The error information reported when running th...
vue-pdf realizes online file preview
This article example shares the specific code of ...
Summary of block-level elements, inline elements, and variable elements
Block element p - paragraph pre - format text tabl...
Detailed deployment steps for MySQL MHA high availability configuration and failover
Table of contents 1. Introduction to MHA 1. What ...
Detailed explanation of the top ten commonly used string functions in MySQL
Hello everyone! I am Mr. Tony who only talks abou...
Detailed explanation of Vue lazyload picture lazy loading example
Documentation: https://github.com/hilongjw/vue-la...