JavaScript to dynamically load and delete tables

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:
  • JavaScript operation dynamically loads data into the table
  • Javascript vue.js table paging, ajax asynchronous loading of data
  • Vue.js table paging ajax asynchronous loading of data
  • Js table 10,000 data instant loading implementation code
  • How to dynamically load tables and add table rows in javascript

<<:  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...

Develop calculator example code using native javascript

The main function of a calculator is to perform n...

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...

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...