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

Introduction to MIME encoding (integrated from online information and practical experience)

1. MIME: Multipurpose Internet Mail Extensions Th...

MySQL query statement process and basic concepts of EXPLAIN statement and its optimization

The performance of your website or service depend...

Use of MySQL DATE_FORMAT function

Suppose Taobao encourages people to shop during D...

Detailed explanation of Nginx regular expressions

Nginx (engine x) is a high-performance HTTP and r...

Summary of some of my frequently used Linux commands

I worked in operations and maintenance for two ye...

How to use CSS styles and selectors

Three ways to use CSS in HTML: 1. Inline style: s...

Three useful codes to make visitors remember your website

Three useful codes to help visitors remember your...

CentOS 7.9 installation and configuration process of zabbix5.0.14

Table of contents 1. Basic environment configurat...

27 Linux document editing commands worth collecting

Linux col command The Linux col command is used t...

mysql command line script execution example

This article uses an example to illustrate the ex...

Vue+Element realizes paging effect

This article example shares the specific code of ...

The content of the commonly used input text box is automatically vertically centered and the default prompt text is empty when clicked

Three functions: 1. Automatic vertical centering o...

MYSQL updatexml() function error injection analysis

First, understand the updatexml() function UPDATE...

The implementation code of the CSS3 input box is similar to the animation effect of Google login

Use CSS3 to animate the input box similar to the ...

MySQL free installation version (zip) installation and configuration detailed tutorial

This article shares the installation and configur...