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: