纯js实现单击可修改表格（类似成绩单），供大家参考，具体内容如下 功能：实现成绩单单击表格可对数据进行修改且对输入的数字大小有验证例如不小于0不大于100，总分栏会对总分进行求和(利
纯js实现单击可修改表格（类似成绩单），供大家参考，具体内容如下
功能：实现成绩单单击表格可对数据进行修改且对输入的数字大小有验证例如不小于0不大于100，总分栏会对总分进行求和(利用了es6的模板字符串）。
实现效果：
代码:
<!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;
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;">成绩登记表</h2>
<div >
<table border="1">
<thead>
<th>学号</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
<script>
// 数组
let data = [
{
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()
}
//初始化数据
// 模板填入数据
function 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="..."往tbody中添加内容
tbodyinner.innerHTML = html
getnode()
}
// 监听click事件
function getNode(){
let subject = document.getElementsByName("grade")
for(let i=0;i<subject.length;i++){
subject[i].addEventListener('click',function(){
edit(this)
})
}
}
//鼠标 移入点
function edit(i){
let inputlen = document.getElementsByTagName('input').length
let oldvalue = i.innerHTML
if(inputlen==0){
// 设置该标签为空
i.innerHTML = ''
// 添加input对象
let inp = document.createElement("input")
inp.value = oldvalue
inp.classList.add("inputClass")
// 添加子节点
i.appendChild(inp)
// 获取文本中的内容
inp.select()
// 失去焦点事件
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("数据值不对，请重新输入！");
}
}
}
}
</script>
</html>--结束END--
本文标题: js实现单击可修改表格
本文链接: https://www.lsjlt.com/news/124253.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0