js实现单击可修改表格
更新时间：2021年04月22日 10:13:56 作者：左一.
这篇文章主要为大家详细介绍了js实现单击可修改表格，类似成绩单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯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;
/* 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;">成绩登记表</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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
作为一项有意思的新技术，canvas给我们带来了对网页绘图和网页动画的新革命。本文简单介绍下canvas实用的功能，下面跟着小编一起来看下吧2017-01-01
如果知道这个对象的所有属性自然就可以重新new一个，然后对每个属性赋值，就可以做到，但如果不知道呢？如何创建一个内容相同 的对象呢？下面有个不错的示例，大家可以看看2013-10-10
下面小编就为大家带来一篇遍历json 对象的属性并且动态添加属性的实现。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
看了之后1是手痒痒，2是觉得楼主的实现有问题，就动手写了一下，用js,大概用了30-40分钟。2009-09-09
怎么去判断一个数据属于哪个数据类型,这个是很常见的操作,我们一般都会想到typeof和instanceof这两个常见的方法,但有时候这两种方法并不能满足我们的需求,下面这篇文章主要给大家介绍了关于JS中数据类型的正确判断方法,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了ExtJs异步无法向外传值和赋值的完美解决办法,需要的朋友可以参考下2017-06-06
今天小编就为大家分享一篇layer.prompt输入层的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了Javascript模仿淘宝信用评价功能实现方法,以完整实例形式分析了JavaScript响应鼠标事件动态改变页面元素的相关技巧,并附带了完整的实例代码供读者下载参考,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了JavaScript如何输出杨辉三角问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了JavaScript闭包原理与用法,结合实例形式分析了javascript闭包的概念、功能、常见问题及相关操作技巧,需要的朋友可以参考下2018-08-08
最新评论