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

Incredible CSS navigation bar underline following effect

The first cutter in China github.com/chokcoco Fir...

HTML tag ID can be a variable

<table id=" <%=var1%>">, the...

Vue integrates PDF.js to implement PDF preview and add watermark steps

Table of contents Achieve results Available plugi...

JS cross-domain XML--with AS URLLoader

Recently, I received a requirement for function ex...

MySQL 8.0.17 installation graphic tutorial

This article shares with you the MySQL 8.0.17 ins...

A brief talk about JavaScript parasitic composition inheritance

Composition inheritance Combination inheritance i...

MySQL Basic Tutorial: Detailed Explanation of DML Statements

Table of contents DML statements 1. Insert record...

Introduction to the steps of deploying redis in docker container

Table of contents 1 redis configuration file 2 Do...

Use of Linux file command

1. Command Introduction The file command is used ...

Brief analysis of the MySQL character set causing database recovery errors

Importing data with incorrect MySQL character set...

How to use HTML 5 drag and drop API in Vue

The Drag and Drop API adds draggable elements to ...

Solution to 1449 and 1045 exceptions when connecting to MySQL

Solution to 1449 and 1045 exceptions when connect...

40 CSS/JS style and functional technical processing

1- Styling dropdown select boxes - Modify the dro...

Differences in the hr separator between browsers

When making a web page, you sometimes use a dividi...