JavaScript dynamically generates a table with row deletion function

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

Recommend

How to install a virtual machine with Windows services on Mac

1. Download the virtual machine Official download...

Vue implements a simple shopping cart example

This article shares the specific code of Vue to i...

js dynamically adds example code for a list of circled numbers

1. Add the ul tag in the body first <!-- Unord...

Detailed explanation of the 8 attribute values ​​of the background attribute (interview question)

The value of the background property in CSS backg...

How to install suPHP for PHP5 on CentOS 7 (Peng Ge)

By default, PHP on CentOS 7 runs as apache or nob...

Example code for mixing float and margin in CSS

In my recent studies, I found some layout exercis...

How to solve the problem that the software package does not exist when installing software in Linux

When the software package does not exist, it may ...

Summary of pitfalls encountered in installing mysql and mysqlclient on centos7

1. Add MySQL Yum repository MySQL official websit...

Rendering Function & JSX Details

Table of contents 1. Basics 2. Nodes, trees, and ...

MySQL database introduction: detailed explanation of multi-instance configuration method

Table of contents 1. What is multi-instance 2. Pr...

Detailed Analysis of Explain Execution Plan in MySQL

Preface How to write efficient SQL statements is ...

How to filter out certain libraries during mysql full backup

Use the --all-database parameter when performing ...

Nginx domain forwarding usage scenario code example

Scenario 1: Due to server restrictions, only one ...

How to use Docker-compose to deploy Django applications offline

Table of contents Install Docker-ce for the devel...

Detailed process of zabbix monitoring process and port through agent

Environment Introduction Operating system: centos...