JavaScript dynamically generates a table with row deletion function

This article example shares the specific code of javascript to dynamically generate tables/delete rows for your reference. The specific content is as follows

Dynamically generate a table with the ability to delete rows:

Implementation ideas

1. Get the table <tbody> element
2. Get the data to be filled, usually from the database, or simulate a set of data for testing. The data is stored in the form of objects. Multiple rows of data can be stored in an array, and each item in the array is an object.
3. ① Loop through the object array and create rows,
②Nest a loop - - -Loop through the object:
a. Create the required number of cells according to the attributes,
b. And assign values to cells,
c. Then add cells to the row,
③Add a cell and assign a link with the text content - - - "Delete", and add the cell to the row
4. Add a new line to tbody
5. Get all a elements - - -document.querySelectorAll('a') to get an object array
6. Loop through the a object array, bind the click event to the a link, and add the delete function - - -tbody.removeChild(this.parentNode.parentNode);

Code Sample

<!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>Dynamically generate table</title>
    <style>
        table {
            border: 1px solid pink;
            border-collapse: collapse;
        }
        
        thead {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <table border="1" cellpadding="5" cellspacing="0" align="center" width="600px">
        <thead>
            <tr>
                <th>Name</th>
                <th>Subject</th>
                <th>Results</th>
                <th>Operation</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var tbody = document.querySelector('tbody');

        var list = [{
            'name': 'SpongeBob SquarePants',
            'subject': 'JavaScript',
            'age': 66
        }, {
            'name': 'Duo Li Ai Meng',
            'subject': 'JavaScript',
            'age': 99
        }, {
            'name': 'Stitch',
            'subject': 'JavaScript',
            'age': 60
        }, {
            'name': 'Pikachu',
            'subject': 'JavaScript',
            'age': 88
        }];

        for (var i = 0; i < list.length; i++) {
            // 1. Create a row var tr = document.createElement('tr');

            // 2. Fill in data for (var k in list[i]) {
                console.log(list[i][k]);
                // 1. Create td cell var td = document.createElement('td');
                //Cell filling content td.innerHTML = list[i][k];
                // 2. Add cell tr.appendChild(td);
            }
            // 3. Add and delete links var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;" >Delete</a>';
            tr.appendChild(td);
            // 4. Add rows tbody.appendChild(tr);
        }

        // Add delete function var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

        console.log(tbody.childNodes);
        console.log(tbody.children);
    </script>
</body>

</html>

Page effect:

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 to dynamically generate tables on web pages
Example of dynamically generating a table with JavaScript
JavaScript to dynamically generate tables
JavaScript generates table code with indentation
Detailed explanation of dynamically generated tables using javascript

<<: A time-consuming troubleshooting process record of a docker error

>>: MySQL grouping queries and aggregate functions

MySql 5.6.35 winx64 installation detailed tutorial

JavaScript dynamically generates a table with row deletion function

Implementation ideas

Code Sample

MySql 5.6.35 winx64 installation detailed tutorial

In-depth explanation of MySQL isolation level and locking mechanism

jQuery implements employee management registration page

Detailed explanation of nginx shared memory mechanism

mysql implements the operation of setting multiple primary keys

Some problems that may be caused by inconsistent MySQL encoding

Handwritten Vue2.0 data hijacking example

The process of setting up an environment for integration testing using remote Docker

Analysis of the process of deploying nGrinder performance testing platform with Docker

Nginx Service Quick Start Tutorial

Recommend

javascript input image upload and preview, FileReader preview image

A brief discussion on the difference between MYSQL primary key constraint and unique constraint

Network management and network isolation implementation of Docker containers

9 Practical Tips for Creating Web Content Pages

Open the Windows server port (take port 8080 as an example)

nginx configuration location summary location regular writing and rewrite rule writing

A brief discussion on common operations of MySQL in cmd and python

Nginx reverse proxy configuration to remove prefix case tutorial

Using js to realize dynamic background

Nodejs-cluster module knowledge points summary and example usage

MySQL 5.7.23 winx64 installation and configuration method graphic tutorial under win10

JavaScript explains the encapsulation and use of slow-motion animation

Detailed explanation of custom instructions for Vue.js source code analysis

Complete code for implementing the vue backtop component

How to modify the initial password of MySQL on MAC