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
1. Download MySQL Community Server 5.6.35 Downloa...
Nginx reverse proxy multiple servers, which means...
We will install phpMyAdmin to work with Apache on...
Table of contents The effect of mixed inheritance...
background: Since the company's projects seem...
The main function of a calculator is to perform n...
1. Environmental Preparation Tencent Cloud Server...
Think big and small, then redirect. Sometimes Lin...
Preface Use js to achieve a year rotation selecti...
Websites without https support will gradually be ...
Kubernetes is the leader in the container orchest...
1. Use CSS, jQuery, and Canvas to create animatio...
Enter Alibaba vector icon library Alibaba Vector ...
Cascading and Cascading Levels HTML elements are ...
In general guestbooks, forums and other places, t...