js实现单击可修改表格

第js实现单击可修改表格纯js实现单击可修改表格（类似成绩单），供大家参考，具体内容如下

功能：实现成绩单单击表格可对数据进行修改且对输入的数字大小有验证例如不小于0不大于100，总分栏会对总分进行求和(利用了es6的模板字符串）。

实现效果：

代码:

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

style

table{

margin:0auto;

z-index:999999;

border-collapse:collapse;

th{

background-color:#4CAF50;

/*background-image:linear-gradient(toright,#eea2a20%,#bbc1bf19%,#57c6e142%,#b49fda79%,#7ac5d8100%);*/

color:white;

tableth,tr,td{

width:100px;

text-align:center;

tableinput{

border:none;

outline:none;

width:100%;

.inputClass{

width:80px;

height:100%

/style

/head

body

div

h2成绩登记表/h2

div

tableborder="1"

thead

th学号/th

th姓名/th

th语文/th

th数学/th

th英语/th

th总分/th

/thead

tbody

/tbody

/table

/div

/div

/body

script

//数组

letdata=[

id:1101,

name:'小王',

Chinese:100,

Math:80,

English:91,

total:271

id:1102,

name:'小曾',

Chinese:88,

Math:87,

English:92,

total:267

id:1103,

name:'小赵',

Chinese:75,

Math:20,

English:86,

total:181

id:1104,

name:'小周',

Chinese:65,

Math:81,

English:83,

total:229

window.onload=function(){

initdata()

//初始化数据

//模板填入数据

functioninitdata(){

lettbodyinner=document.getElementsByTagName("tbody")[0]

lethtml=''

for(leti=0;idata.length;i++){

html+=`

td${data[i].id}/td

td${data[i].name}/td

tdname="grade"${data[i].Chinese}/td

tdname="grade"${data[i].Math}/td

tdname="grade"${data[i].English}/td

td${parseInt(data[i].Chinese)+parseInt(data[i].Math)+parseInt(data[i].English)}/td

/tr

//tbody.innerHTML="..."往tbody中添加内容

tbodyinner.innerHTML=html

getNode()

//监听click事件

functiongetNode(){

letsubject=document.getElementsByName("grade")

for(leti=0;isubject.length;i++){

subject[i].addEventListener('click',function(){

edit(this)

//鼠标移入点

functionedit(i){

letinputlen=document.getElementsByTagName('input').length

letoldvalue=i.innerHTML

if(inputlen==0){

//设置该标签为空

i.innerHTML=''

//添加input对象

letinp=document.createElement("input")

inp.value=oldvalue

inp.classList.add("inputClass")

//添加子节点

i.appendChild(inp)

//获取文本中的内容

inp.select()

//失去焦点事件

inp.onblur=function(){

if(inp.value=100inp.value=0){

i.innerHTML=inp.value

letval1=i.parentNode.childNodes[5].innerHTML

letval2=i.parentNode.childNodes[7].innerHTML

letval3=i.parentNode.childNodes[9].innerHTML

i.parentNode.childNodes[11].innerHTML=