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
The first cutter in China github.com/chokcoco Fir...
<table id=" <%=var1%>">, the...
Table of contents Achieve results Available plugi...
CSS font properties define the font family, size,...
Recently, I received a requirement for function ex...
This article shares with you the MySQL 8.0.17 ins...
Composition inheritance Combination inheritance i...
Table of contents DML statements 1. Insert record...
Table of contents 1 redis configuration file 2 Do...
1. Command Introduction The file command is used ...
Importing data with incorrect MySQL character set...
The Drag and Drop API adds draggable elements to ...
Solution to 1449 and 1045 exceptions when connect...
1- Styling dropdown select boxes - Modify the dro...
When making a web page, you sometimes use a dividi...