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