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

Implementing add, delete, modify and query operations on MySQL based on sqlalchemy

JavaScript dynamically generates a table with row deletion function

Implementation ideas

Code Sample

Implementing add, delete, modify and query operations on MySQL based on sqlalchemy

Detailed tutorial for downloading and installing mysql8.0.21

Building a Redis cluster on Docker

Conventional JS processing functions for Vue Element front-end application development

Weird and interesting Docker commands you may not know

Vue echarts realizes dynamic display of bar chart

A brief description of the relationship between k8s and Docker

Detailed explanation of the solution to Tomcat's 404 error

How to solve the problem of too many open files in Linux

Detailed explanation of using scp command to copy files remotely in Linux

Recommend

This article will show you the basics of JavaScript: deep copy and shallow copy

Jenkins Docker static agent node build process

VMwarea virtual machine installation win7 operating system tutorial diagram

Mysql database master-slave separation example code

How to configure whitelist access in mysql

When setting up Jenkins in Docker environment, the console log shows garbled Chinese characters when building tasks

Enable sshd operation in docker

Calling Baidu Map to obtain longitude and latitude in Vue

Detailed explanation of compatibility issues and solutions for setting max-width and min-width in table

960 Grid System Basic Principles and Usage

Summary of some common techniques in front-end development

MySQL installation and configuration method graphic tutorial (CentOS7)

A practical record of encountering XSS attack in a VUE project

Example of Vue uploading files using formData format type

A brief discussion on Linux virtual memory