js拖拉表格实现内容计算
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了js拖拉表格实现内容计算，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js拖拉表格实现内容计算的具体代码，供大家参考，具体内容如下
前言
- 制作网页版Excel
- H5新增功能：可拖拉-draggable, 可编辑-contenteditable
实现结果
代码实现
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<style>
table, th, tr, td {
margin: 0;
padding: 0;
width: 800px;
text-align: center;
border: solid 1px #000;
}
td {
width: auto;
background-color: pink;
}
.ops {
cursor: move;
}
</style>
</head>
<body>
<table id="table">
<thead id="thead">
<tr id="header">
<th>1</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<script src="main.js"></script>
</body>
</html>
main.js
createTable(10,10);
init();
// 表格初始化
// @param1: rows, 行数
// @param2: cols, 列数
function createTable(rows, cols) {
let header = document.getElementById('header'),
body = document.getElementById('tbody');
for (let i = 0; i < rows; i ++){
let tmp = '',
trEle = document.createElement('tr');
for (let j = 0; j < cols; j ++){
//thead
if (i <= 1){
tmp += `<th>${j}</th>`;
}
else {
tmp += `<td class="ops" draggable="true">${i}</td>`;
}
}
// console.log(tmp);
if (i <= 1) header.innerHTML = tmp;
else{
trEle.innerHTML = tmp;
body.appendChild(trEle);
}
}
}
/*
* 表格拖拽
* */
function init(){
let x,y,data;
document.body.addEventListener('click', event=>{
event.preventDefault();
});
document.body.addEventListener('dragstart', event => {
if (event.target.nodeName.toLowerCase() !== 'td'){
alert('选择正确的内容');
return false;
}
// console.log(event);
x = event.clientX - 5,
y = event.clientY - 5,
data = parseInt(event.target.firstChild.data);
let img = new Image();
img.src = 'test.png';
event.dataTransfer.setDragImage(img, 0,0);
// console.log(x, y, data);
});
//阻止默认处理
document.body.addEventListener('dragover', event => {
event.preventDefault();
});
document.body.addEventListener('drop', event => {
let tmp = new dragCalculation(x,y,data);
let endX = event.clientX - 5,
endY = event.clientY - 5,
endData = parseInt(event.target.firstChild.data);
// console.log(event.target.firstChild.data);
// console.log(isNaN(endData))
if (isNaN(endData)) {
alert('移动位置错误');
return false;
}
// console.log(endX, endY, endData);
let result = tmp.sum(endX, endY, endData);
event.target.firstChild.data = result;
event.target.style.backgroundColor = '#b4e318'
});
}
let dragCalculation = function (x, y, data){
this.startX = x;
this.startY = y;
this.startData = data;
};
dragCalculation.prototype.sum = function (x, y, data) {
//应该详细的边界判断
if (this.startX == x ||
this.startY == y ||
isNaN(data)) {
alert('不要放在原地不动');
return false;
}
// 取和
return data + this.startData;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：js实现指定红包顺序和金额算法
下一篇：React useEffect的理解与使用