原生js实现可编辑表格
效果图
未点击状态
点击状态
修改之后
修改失败:失败后会自动调整为原数
需求
在网页上创建一个学生信息表格,鼠标点击分数则可以修改,鼠标点击其他地方则进行保存。
html代码
将可编辑的地方绑定上remake类。
<!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" />
<link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
<title>可编辑表格</title>
</head>
<body>
<div class="table">
<table border="1" id="miao">
<caption>
可编辑表格
</caption>
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td >小明</td>
<td class="remake">98</td>
<td class="remake">89</td>
<td class="remake">98</td>
</tr>
<tr>
<td>小王</td>
<td class="remake">20</td>
<td class="remake">89</td>
<td class="remake">98</td>
</tr>
<tr>
<td>小李</td>
<td class="remake">98</td>
<td class="remake">59</td>
<td class="remake">98</td>
</tr>
</table>
</div>
</body>
</html>
CSS代码
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
//flex布局居中
}
caption{
font-size: 40px;
}
table{
text-align: center;
table-layout:fixed;
}
input{
width: 99%;
height: 95%;
text-align: center;
}
td{
width: 180px;
height: 90px;
}
JS代码
实现思路:
先获取类名为remake的所有列表标签,存到remake数组中,之后循环remake数组进行每个标签onclick时事件的绑定,绑定上箭头函数。
点击一个分数后,将这个标签的display属性设置为none,在dom树中不再显示,再创建一个td结点,一个input结点,将input结点value值填入之前表格中存的分数。将td结点插入到原位置,原位置通过remake[i]进行寻找,然后再将创建好的input插入到td结点上,作为子节点。
这里的同时使用focus函数进行焦点的获取,点击之后的焦点就在input结点上,则就可以写onblur事件进行焦点失去事件函数的绑定。
焦点失去函数先使用checknum函数进行判断写入值是否合法,如果合法,则先修改原结点的innerHTML,再把刚刚增加的td结点删除掉,此时子节点input也会被删除。再把之前的display值赋为空字符串,则之前的td元素又会被显示。
小技巧如果将display设置成block可能会导致换行问题,inline同样所以最好设置为空字符串也就是""。
window.onload = function () {
var remake = document.getElementsByClassName("remake");
for (let i = 0; i < remake.length; i++) {
remake[i].onclick = () => {
remake[i].style.display = "none";
var para = document.createElement("input");
var ctd = document.createElement("td");
para.value = remake[i].innerHTML;
remake[i].parentNode.insertBefore(ctd, remake[i]);
ctd.appendChild(para, ctd);
para.focus();
para.onblur = () => {
if (checknum(Number(para.value))) {
remake[i].innerHTML = Number(para.value);
remake[i].parentNode.removeChild(ctd);
remake[i].style.display = ""
} else {
alert("输入有误!");
remake[i].parentNode.removeChild(ctd);
remake[i].style.display = "";
}
}
}
}
//此函数判断分数是否合法
var checknum = function (num) {
let sum = Number(num);
if (sum >= 0 && sum <= 100) {
return true;
} else {
return false;
}
}
}
如有错误或者建议,希望大佬指出!