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:
|
<<: Explanation of Dockerfile instructions and basic structure
>>: MySQL Optimization Summary - Total Number of Query Entries
Recommend
How to configure VMware virtual machine NAT mode
This article describes the VMware virtual machine...
Centos 7.4 server time synchronization configuration method [based on NTP service]
This article describes how to configure time sync...
How to build gitlab on centos6
Preface The original project was placed on the pu...
How to deploy multiple Vue projects under the same domain name using nginx and use reverse proxy
Effect There are currently 2 projects (project1, ...
Detailed explanation of fuser command usage in Linux
describe: fuser can show which program is current...
Complete step record of vue encapsulation TabBar component
Table of contents Implementation ideas: Step 1: C...
Learn the black technology of union all usage in MySQL 5.7 in 5 minutes
Performance of union all in MySQL 5.6 Part 1:MySQ...
MySQL permissions and database design case study
Permissions and database design User Management U...
Ubuntu 15.04 opens mysql remote port 3306
Ubuntu 15.04 opens MySQL remote port 3306. All th...
Detailed explanation on how to install MySQL database on Alibaba Cloud Server
Preface Since I needed to install Zookeeper durin...
Two practical ways to enable proxy in React
Two ways to enable proxy React does not have enca...
How to import/save/load/delete images locally in Docker
1. Docker imports local images Sometimes we copy ...
Analysis of basic usage of ul and li
Navigation, small amount of data table, centered &...
Specific use of MySQL operators (and, or, in, not)
Table of contents 1. Introduction 2. Main text 2....
Docker image management common operation code examples
Mirroring is also one of the core components of D...