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

A brief introduction to JavaScript arrays

Table of contents Introduction to Arrays Array li...

Docker5 full-featured harbor warehouse construction process

Harbor is an enterprise-level registry server for...

impress.js presentation layer framework (demonstration tool) - first experience

I haven’t blogged for half a year, which I feel a ...

Summary of naming conventions for HTML and CSS

CSS naming rules header: header Content: content/c...

How to remotely log in to the MySql database?

Introduction: Sometimes, in order to develop a pr...

Detailed explanation of JavaScript clipboard usage

(1) Introduction: clipboard.js is a lightweight J...

How to recompile Nginx and add modules

When compiling and installing Nginx, some modules...

Docker build PHP environment tutorial detailed explanation

Docker installation Use the official installation...

CUDA8.0 and CUDA9.0 coexist under Ubuntu16.04

Preface Some of the earlier codes on Github may r...

How to let https website send referrer https and http jump referrer

This article describes a proposal for a metadata ...

Implementation of mysql data type conversion

1. Problem There is a table as shown below, we ne...

A method of hiding processes under Linux and the pitfalls encountered

Preface 1. The tools used in this article can be ...

Detailed explanation of CentOS7 online installation of Docker 17.03.2 using Alibaba Cloud Docker Yum source

Reference Documentation Official Docker installat...

Detailed explanation of adding click event in echarts tooltip in Vue

Table of contents need Workaround 1. Set tooltip ...

How to use Linux locate command

01. Command Overview The locate command is actual...