JS 可编辑表格的实现

1、实现效果

用户点击语文，数学，英语部分的单元格，可以实现分数的编辑，总分也会随之变化。先看下效果，如图：

2、设计思路

先通过HTML5+CSS3绘制表格，添加input的样式和err提示动画。
给要修改的数据的单元格添加name属性，给总分那一列的单元格添加rname属性。先获取所有要更改数据的单元格，通过for循环遍历，给他们添加单击事件。
定义一个addAnimate方法，表示单元格输入错误时的动画提示
定义setCellCilck方法，给单元格添加点击事件
定义一个updateCell()方法，里面传入一个ele参数。先要获取旧的数据并保存为oldhtml。然后创建一个input标签，并传入oldhtml。在input标签的聚焦事件中判断输入的input值是否合法，若不合法，则调用addAnimate()方法弹出error标签的错误提示信息，若合法，则直接赋给单元格当前输入的值。
定义一个updateScore方法，用来计算分数。通过class取出每行的分数的值，再取出总成绩的值。每个人总成绩等于每行分数相加。

3、实现源码

table.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>table</title>
</head>
<link rel="stylesheet" href="table.css"><body><div id="tableBox"><h2 class="title">可编辑表格</h2><div class="err">成绩输入有误,请重新输入!</div><table class="table"><thead><tr><th>学号</th><th>姓名</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th></tr></thead><tbody><tr><td>1101</td><td>小王</td><td name="grade">98</td><td name="grade">80</td><td name="grade">91</td><td rname="allgrade">269</td></tr><tr><td>1102</td><td>小曾</td><td name="grade">88</td><td name="grade">87</td><td name="grade">92</td><td rname="allgrade">267</td></tr><tr><td>1103</td><td>小赵</td><td name="grade">75</td><td name="grade">90</td><td name="grade">86</td><td rname="allgrade">251</td></tr><tr><td>1104</td><td>小周</td><td name="grade">65</td><td name="grade">81</td><td name="grade">83</td><td rname="allgrade">229</td></tr></tbody></table></div>
</body>
<script src="table.js"></script></html>

table.css

* {margin: 0;padding: 0;--border: 2px solid rgba(121, 121, 121, 1);
}#tableBox {position: relative;user-select: none;
}.table {margin: 0 auto;border-spacing: 0;border-collapse: collapse;text-align: center;margin-top: 47px;z-index: 1;
}.err {display: none;top: 95px;width: 160px;position: absolute;margin-left: -100px;left: 50%;text-align: center;padding: 15px 18px;background: orange;border-radius: 5px;font-size: 13px;font-weight: 600;transition: top 1s;z-index: -1;
}.movedown {top: 95px;animation: movedown 3s;
}@keyframes movedown {0% {top: 95px}50% {top: 48px}100% {top: 95px}
}.title {text-align: center;padding: 8px 0;
}tr,
td,
th {border: var(--border)
}th {font-weight: 600;text-align: center;background-color: rgba(204, 204, 204, 1);
}td>input {width: 100px;height: 45px;border: none;font-size: 16px;
}.table>thead>tr>th,
.table>tbody>tr>td {width: 100px;height: 45px;font-size: 16px;
}.table>thead>tr {font-family: '宋体';
}button {color: #fff;background-color: #d9534f;border-color: #d43f3a;user-select: none;border: 1px solid transparent;border-radius: 4px;cursor: pointer;padding: 10px 12px;font-size: 14px;text-align: center;
}

table.js：

var stutable = document.getElementsByClassName("table")[0]
var grades = document.getElementsByName("grade")
var thetips = document.getElementsByClassName("err")[0]
var trs = document.getElementsByTagName("tr")// 给单元格添加点击事件
function setCellCilck() {for (let i = 0; i < grades.length; i++) {grades[i].onclick = function () {updateCell(this)}}
}
setCellCilck()// 更新单元格内容
function updateCell(ele) {if (document.getElementsByClassName("active-input").length == 0) {var oldhtml = ele.innerHTML;ele.innerHTML = '';var newInput = document.createElement('input');newInput.setAttribute("class", "active-input")newInput.value = oldhtml;newInput.onblur = function () {if (!(Number(this.value)) || this.value > 100 || this.value < 0) {console.log("err")addAnimate()thetips.style.display = "block"return} else {thetips.style.display = "none"ele.innerHTML = this.value == oldhtml ? oldhtml : this.value;updateScore()}}newInput.select()ele.appendChild(newInput);newInput.focus()} else {return}}// 更新总成绩
function updateScore() {for (let n = 1; n < trs.length; n++) {var grade01 = grades[n].parentNode.parentNode.children[n - 1].querySelectorAll("td[name]")var grade02 = grades[n].parentNode.parentNode.children[n - 1].querySelectorAll("td[rname]")var sum = 0for (let i = 0; i < grade01.length; i++) {sum += parseFloat(grade01[i].innerHTML)for (let j = 0; j < grade02.length; j++) {grade02[j].innerHTML = sum}}}
}
updateScore()// 添加动画
function addAnimate() {thetips.className = "err movedown"
}

4、总结

通过Name，className，parentNode，querySelectorAll等方法来获取节点。
通过createElement来创建节点。
通过setAttribute来设置节点属性。

JS 可编辑表格的实现相关推荐

JS 可编辑表格的实现(进阶)
1.前言在普通的可编辑表格的基础上,改进可编辑表格.数据来自外部的json(模拟服务端),通过json数据生成可编辑表格.根据实际情况,表格没有新增数据功能.表格的可编辑列,计算的列,每列的数据大小 ...
使html表格可编辑状态,js+Html实现表格可编辑操作
本文实例为大家分享了js+Html实现表格可编辑操作的具体代码,供大家参考,具体内容如下功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容. 点击增加行,在 ...
前台特效（3) 编辑表格
<!DOCTYPE html> <html><head><title>编辑表格</title><meta http-equiv=&qu ...
android 编辑自定义可编辑表格,smart 框架列表可编辑表格
可编辑表格常用属性 colModel: [ {label: "主键ID", name: "hellop1",hidden:true}, {label: &quo ...
ExtJS4.2学习(七)EditorGrid可编辑表格(转)
鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ------------- ...
可编辑表格TableCell
方法一----------------------------------------------------------------------------- <html> <he ...
easyUI可编辑表格编辑器添加事件
在使用easyUI的可编辑表格时,可以为编辑器添加键盘事件处理,这样就可以直接通过键盘进行操作,大大提升编辑效率.比如说在编辑完一行时,可以按下回车就自动添加新行而不用去点击添加行按钮,在编辑到一半想 ...
jQuery实现可编辑表格
可编辑表格,这个东西听起来挺高大上,其实用jQuery来实现,了解一下思路,就很简单 1.事实上是编辑td里面的内容,所以给他一个双击事件 2.双击完了这个td将其变为一个input,里面的值还保留着 ...
EasyUI/TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 numberbox
这两天研究了一下topjui的可编辑表格edatagrid,想在每一列的后面根据返回的数据判断是使用 combobox 还是 numberbox,期间遇到了一些坑,下面实现代码,需要的朋友可以参考一下 ...

JS 可编辑表格的实现

1、实现效果

2、设计思路

3、实现源码

4、总结

JS 可编辑表格的实现相关推荐

最新文章

热门文章