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
Graphic tutorial for installing MySQL 5.6.35 on Windows 10 64-bit
1. Download MySQL Community Server 5.6.35 Downloa...
How to implement Nginx reverse proxy for multiple servers
Nginx reverse proxy multiple servers, which means...
Detailed tutorial on installing phpMyAdmin on Ubuntu 18.04
We will install phpMyAdmin to work with Apache on...
Detailed explanation of mixed inheritance in Vue
Table of contents The effect of mixed inheritance...
Implementation ideas and steps for MySQL master-slave construction (multiple masters and one slave)
background: Since the company's projects seem...
Develop calculator example code using native javascript
The main function of a calculator is to perform n...
The problem of being unable to enter the management page when installing rabbitmq in docker
1. Environmental Preparation Tencent Cloud Server...
How to find the specified content of a large file in Linux
Think big and small, then redirect. Sometimes Lin...
Example of using js to natively implement year carousel selection effect
Preface Use js to achieve a year rotation selecti...
How to configure https for nginx in docker
Websites without https support will gradually be ...
Summary of Kubernetes's application areas
Kubernetes is the leader in the container orchest...
CSS3 solution to the problem of freezing on mobile devices (animation performance optimization)
1. Use CSS, jQuery, and Canvas to create animatio...
CSS uses Alibaba vector library to quickly add good-looking icon effects to the corresponding positions (example code)
Enter Alibaba vector icon library Alibaba Vector ...
CSS stacking and z-index example code
Cascading and Cascading Levels HTML elements are ...
Some parameter descriptions of text input boxes in web design
In general guestbooks, forums and other places, t...