js to implement add and delete table operations

js to implement add and delete table operations

This article example shares the specific code of js to add and delete tables for your reference. The specific content is as follows

Effect:

1. Click the Add button to add a row to the table and change the checkbox in front of Select All to false.

1.1. The newly added checkbox plus click event

2. Click the delete button to get the selected row in the table body, delete the entire tr, and change the checkbox in front of Select All to false

The state of the checkbox in the first td is checked to true.

3. Click the checkbox in front of the Select All button. If it is selected, all the checkboxes below will be selected. If it is not selected, all the checkboxes below will be unselected.

4. Click the checkbox in each table body. If all checkboxes are selected, the Select All button is selected. If one is not selected, the Select All button is unselected.

CSS:

 <style>
        .head {
            width: 500px;
            padding: 8px;
            margin: 20px auto;
            box-sizing: border-box;
            border: 1px solid #eee;
        }
 
        input {
            margin-left: 3px;
            outline: none;
        }
 
        button {
            float: right;
        }
 
        table {
            width: 500px;
            border: 1px solid #000;
            margin: 0 auto;
            border-collapse: collapse;
        }
 
        tr,
        td,
        th {
            border: 1px solid #000;
        }
 
        tr td:nth-child(1) {
            text-align: center;
        }
 
        .foot {
            width: 500px;
            margin: 8px auto;
            padding: 8px;
            box-sizing: border-box;
 
        }
 
        .foot button {
            float: right;
        }
 
        td:nth-child(2),
        td:nth-child(3),
        td:nth-child(4) {
            width: 20%;
        }
</style>

html:

<div class="head">
        <span>Please enter your name:</span><input type="text"><br>
        <span>Please enter your gender:</span><input type="radio" name="sex" checked>Male<input type="radio" name="sex">Female<br>
        <span>Please enter your age:</span><input type="text"><button>Add to table</button>
    </div>
    <table>
        <thead>
            <th><input type="checkbox"> Select All</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Age</th>
        </thead>
        <tbody>
            <tr class="tr1">
                <td><input type="checkbox"></td>
                <td>Zhang San</td>
                <td>Female</td>
                <td>88</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Li Si</td>
                <td>Male</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Wang Wu</td>
                <td>Female</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>
<div class="foot"><button>Delete selected row</button></div>

javascript:

 // Event trilogy // 1. Get the element button table tBody checkbox inp
        var btns = document.querySelectorAll('button');
        var table = document.querySelector('table');
        var inps = document.querySelectorAll('input');
        var all = table.tHead.querySelector('input');
        var cks = table.tBodies[0].getElementsByTagName('input');
        var cks1 = table.tBodies[0].querySelectorAll('input');
        // console.log(btns, table, inps, cks);
        // console.log(cks, all);
        console.log(cks, cks1);
 
        // 2. Click the add button btns[0].onclick = function(){
            // 3. Add a row to the table var tr = document.createElement('tr');
            // 4. Add tr to tbody
            table.tBodies[0].appendChild(tr);
 
            // 5. Create td
            var inp = document.createElement('td');
            inp.innerHTML = '<input type="checkbox">';
            tr.appendChild(inp);
 
            var user = document.createElement('td');
            user.innerHTML = inps[0].value;
            tr.appendChild(user);
 
            var sex = document.createElement('td');
            sex.innerHTML = inps[1].checked ? '男' : '女';
            tr.appendChild(sex);
 
            var age = document.createElement('td');
            age.innerHTML = inps[3].value;
            tr.appendChild(age);
 
            // 6. The checkbox in front of Select All becomes false 
            all.checked = false;
 
            // The newly added checkbox plus the click event var bck = tr.querySelector('input');
            console.log(bck);
            bck.onclick = function(){
                auto();
            }
        }
 
 
        // 7. Click the delete button to delete the selected row btns[1].onclick = function(){
            // 8. Get the selected row in the table body // console.log(cks, cks1);
            // 9. Determine whether the check box is selected for(var i = 0; i < cks.length; i++){
                console.log(cks);
                if(cks[i].checked){
                    // console.log(cks[i].parentNode.parentNode);
                    // console.log(cks);
                    // 10. Delete the entire row cks[i].parentNode.parentNode.remove();
                    i--;
                }
            }
            // 11. Change the checkbox in front of Select All to false
            all.checked = false;
        }
      
        // Click the checkbox in front of the Select All button. If it is selected, all the checkboxes below it will be selected. If it is not selected, all the checkboxes below it will be unchecked. // 12. Click all
        all.onclick = function(){
            console.log(all.checked);
            // 13. Each for(var i = 0; i < cks.length;i++){
                cks[i].checked = all.checked;
            }
        }
 
        // Click on each checkbox in the table body. If all checkboxes are selected, the Select All button is selected. If one is not selected, the Select All button is unselected for(var j = 0; j < cks.length; j++){
            // Click cks[j].onclick = function(){
                // all // for(var i = 0; i < cks.length; i++){
                // console.log(cks[i].checked);
                // // If one is not selected, the select all button is unchecked // if (cks[i].checked == false) {
                // // The select all button is unchecked // all.checked = false;
                // // End the entire function // return;
                // }
                // }
                // // All are checked // all.checked = true;
                auto();
            }
        }
 
        function auto() {
            // all for(var i = 0; i < cks.length; i++){
                    console.log(cks[i].checked);
                    // If one is not selected, the select all button is unchecked if(cks[i].checked == false){
                        // The select all button is unchecked all.checked = false;
                        // End the entire function return;
                    }
                }
                // All are selected all.checked = true;
        }

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:
  • js dynamically implements table addition and deletion operations
  • angularJs table add delete modify query method
  • js dynamically adds table row by row to add, delete, traverse the value of the example code
  • Dynamically add and delete table rows based on JavaScript
  • Methods for dynamically adding and deleting table rows using native JS and JQuery
  • js simple table add row and delete row operation example
  • js implementation code for dynamically adding and deleting table rows
  • JS small function (operating Table--dynamically adding and deleting tables and data) implementation code
  • JavaScript dynamic operation table example (add, delete rows, columns and cells)
  • js to dynamically add, delete rows, and onkeyup table sum example

<<:  Detailed explanation of the use of various MySQL indexes

>>:  How to manage multiple projects on CentOS SVN server

Recommend

CentOS7 uses rpm to install MySQL 5.7 tutorial diagram

1. Download 4 rpm packages mysql-community-client...

Vue custom table column implementation process record

Table of contents Preface Rendering setTable comp...

JavaScript Dom Object Operations

Table of contents 1. Core 1. Get the Dom node 2. ...

Recommended plugins and usage examples for vue unit testing

Table of contents frame First-class error reporti...

Solve the problem of MySQL using not in to include null values

Notice! ! ! select * from user where uid not in (...

Detailed tutorial for installing mysql 8.0.12 under Windows

This article shares with you a detailed tutorial ...

Vue3 (III) Website Homepage Layout Development

Table of contents 1. Introduction 2. Actual Cases...

Mysql5.7.14 Linux version password forgotten perfect solution

In the /etc/my.conf file, add the following line ...

JavaScript to switch multiple pictures

This article shares the specific code of JavaScri...

Solve the problem of MySql client exiting in seconds (my.ini not found)

Problem description (environment: windows7, MySql...

Implementation steps of encapsulating components based on React

Table of contents Preface How does antd encapsula...

Linux's fastest text search tool ripgrep (the best alternative to grep)

Preface Speaking of text search tools, everyone m...

CSS code abbreviation div+css layout code abbreviation specification

Using abbreviations can help reduce the size of yo...

HTML page jump and parameter transfer issues

HTML page jump: window.open(url, "", &q...

Mysql query the most recent record of the sql statement (optimization)

The worst option is to sort the results by time a...