js implements single click to modify the table

Pure js implements a single-click editable table (similar to a transcript) for your reference. The specific content is as follows

Function: Click the table in the transcript to modify the data and verify the size of the input number, for example, not less than 0 and not more than 100. The total score column will sum the total score (using es6 template strings).

Result:

Code:

<!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>Document</title>
    <style>
        table{
            margin: 0 auto;
            z-index:999999;
            border-collapse: collapse;
        }
        th {
         background-color: #4CAF50;
         /* background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); */
         color: white;
}
        table th,tr,td{
            width:100px;
            text-align: center;
        }
        table input{
            border:none;
            outline: none;
            width: 100%;
        }
        .inputClass{
            width:80px;
            height:100%
        }

    </style>
</head>
<body>
    <div style="position: relative;margin-top: 200px;text-align:center">
        <h2 style="margin-bottom: 50px;">Score Registration Form</h2>
        <div >
            <table border="1">
                <thead>
                    <th>Student Number</th>
                    <th>Name</th>
                    <th>Language</th>
                    <th>Mathematics</th>
                    <th>English</th>
                    <th>Total score</th>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</body>
<script>
    // array let data = [
        {
            id:1101,
            name:'Xiao Wang',
            English:100,
            Math:80,
           English:91,
            total:271
        },
        {
            id:1102,
            name:'Xiao Zeng',
            English:88,
            Math:87,
            English:92,
            Total:267
        },
        {
            id:1103,
            name:'Xiao Zhao',
            English:75,
            Math:20,
            English:86,
            total:181
        },
        {
            id:1104,
            name:'Xiao Zhou',
            English:65,
            Math:81,
            English:83,
            Total:229
        }
    ]
    window.onload = function(){
        initdata()
    }
    //Initialize data//Template fills in datafunction initdata(){
        let tbodyinner = document.getElementsByTagName("tbody")[0]
        let html = ''
        for(let i=0;i<data.length;i++){
            html+=`
            <tr>
                <td>${data[i].id}</td>
                <td>${data[i].name}</td>
                <td name="grade" class="chinese">${data[i].Chinese}</td>
                <td name="grade" class="math">${data[i].Math}</td>
                <td name="grade" class="english">${data[i].English}</td>
                <td class="allscore">${parseInt(data[i].Chinese)+parseInt(data[i].Math)+parseInt(data[i].English)}</td>
            </tr>
            `
        }
        // tbody.innerHTML="..."Add content to tbody tbodyinner.innerHTML = html
        getNode()
    }
    // Listen for click events function getNode(){
        let subject = document.getElementsByName("grade")
        for(let i=0;i<subject.length;i++){
            subject[i].addEventListener('click',function(){
                edit(this)
            })
        }
    }
    //Mouse enter point function edit(i){
        let inputlen = document.getElementsByTagName('input').length
        let oldvalue = i.innerHTML
        if(inputlen==0){
            // Set the tag to empty i.innerHTML = ''
            // Add input object let inp = document.createElement("input")
            inp.value = oldvalue
            inp.classList.add("inputClass")
            // Add child node i.appendChild(inp)
            // Get the content in the text inp.select()
            // Lost focus event inp.onblur = function(){
                if(inp.value<=100&&inp.value>=0){
                    i.innerHTML = inp.value
                    let val1 = i.parentNode.childNodes[5].innerHTML
                    let val2 = i.parentNode.childNodes[7].innerHTML
                    let val3 = i.parentNode.childNodes[9].innerHTML
                    i.parentNode.childNodes[11].innerHTML = parseInt(val1)+parseInt(val2)+parseInt(val3)
                }else{
                 
                    return alert("The data value is incorrect, please re-enter!");
                }
            }
        }
    }
</script>
</html>

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:

AngularJS implements table table td cell click to change input box/editable state example
How to generate dynamic tables in js and add click events to each cell
vuejs element table table add rows, modify, delete rows individually, delete rows in batches
angularJs table add delete modify query method
JS implements the addition, modification and deletion of dynamic tables (recommended)
JS method to dynamically modify table cellPadding and cellSpacing
js method to dynamically modify the colspan column span of a table row
JavaScript to modify the table background color example code sharing
Query the text in the table bound to the data island and modify the display method of the js code

<<: Explanation of Dockerfile instructions and basic structure

>>: MySQL Optimization Summary - Total Number of Query Entries

JS cross-domain solution react configuration reverse proxy

js implements single click to modify the table

JS cross-domain solution react configuration reverse proxy

MySQL multi-instance configuration solution

Native js to achieve accordion effect

js to achieve drag and drop sorting details

Summary of various methods for JavaScript to determine whether it is an array

Analysis of the implementation process of Docker intranet penetration frp deployment

Implementation of docker redis5.0 cluster cluster construction

Writing tab effects with JS

A brief discussion on the three major issues of JS: asynchrony and single thread

A detailed explanation of the subtle differences between Readonly and Disabled

Recommend

Vue realizes dynamic progress bar effect

In-depth understanding of MySQL master-slave replication thread state transition

Introduction to several ways to introduce CSS in HTML

MySQL data backup and restore sample code

Share 8 CSS tools to improve web design

How to configure Nginx to distinguish between PC or mobile phone access to different domain names

Detailed explanation of CSS3 flex box automatic filling writing

js to make a simple calculator

Detailed explanation of how to quickly build a blog website using Docker

7 native JS error types you should know

Set the input to read-only via disabled and readonly

JS implements circular progress bar drag and slide

MySQL 5.6.33 installation and configuration tutorial under Linux

Vue calls the computer camera to realize the photo function

Docker binding fixed IP/cross-host container mutual access operation