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

How to deal with time zone issues in Docker

background When I was using Docker these two days...

How to implement checkbox & radio alignment

Not only do different browsers behave differently...

Implementation of Docker building Maven+Tomcat basic image

Preface In Java programming, most applications ar...

How to process blob data in MySQL

The specific code is as follows: package epoint.m...

Detailed explanation of Angular routing basics

Table of contents 1. Routing related objects 2. L...

Example of using CSS filter to write mouse over effect

Use CSS filter to write mouse over effect <div...

Detailed process of changing apt source to Alibaba Cloud source in Ubuntu 18.04

Table of contents Preface: Ubuntu 18.04 changes a...

Use jQuery to fix the invalid page anchor point problem under iframe

The application scenario is: the iframe page has n...

A complete guide on how to query and delete duplicate records in MySQL

Preface This article mainly introduces the method...

Example analysis of the principle and solution of MySQL sliding order problem

This article uses examples to explain the princip...

Detailed explanation of Linx awk introductory tutorial

Awk is an application for processing text files, ...