js實現(xiàn)單擊可修改表格

第js實現(xiàn)單擊可修改表格純js實現(xiàn)單擊可修改表格（類似成績單），供大家參考，具體內(nèi)容如下

功能：實現(xiàn)成績單單擊表格可對數(shù)據(jù)進行修改且對輸入的數(shù)字大小有驗證例如不小于0不大于100，總分欄會對總分進行求和(利用了es6的模板字符串）。

實現(xiàn)效果：

代碼:

!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學(xué)號/th

th姓名/th

th語文/th

th數(shù)學(xué)/th

th英語/th

th總分/th

/thead

tbody

/tbody

/table

/div

/div

/body

script

//數(shù)組

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()

//初始化數(shù)據(jù)

//模板填入數(shù)據(jù)

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中添加內(nèi)容

tbodyinner.innerHTML=html

getNode()

//監(jiān)聽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){

//設(shè)置該標簽為空

i.innerHTML=''

//添加input對象

letinp=document.createElement("input")

inp.value=oldvalue

inp.classList.add("inputClass")

//添加子節(jié)點

i.appendChild(inp)

//獲取文本中的內(nèi)容

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=