js-拖拉表格实现内容计算-在线excel

本文主要是介绍js-拖拉表格实现内容计算-在线excel，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

js-拖拉表格实现内容计算目录

文章目录

前言
实现结果
代码实现
- `index.html`
- `main.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 ++){//theadif (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;
}