js拖拉表格实现内容计算
更新时间：2021年04月19日 11:50:16 作者：莫兮是我
这篇文章主要为大家详细介绍了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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js兼容火狐显示上传图片预览效果的方法,涉及js调用FileReader实现图片预览功能的技巧,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了基于Bootstrap实现tab标签切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
本文主要介绍了使用js获取隐藏元素宽高的解决方案以及代码思路，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
下面小编就为大家带来一篇JS判断字符串变量是否含有某个字串的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
Sample script that displays all of the users in a given SQL
Sample script that displays all of the users in a given SQL Server DB...2007-06-06
这篇文章主要为大家详细介绍了JavaScript使用面向对象编程实现烟花特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
分页全选或反选标识 对多选按钮操作。 批量全选添加、批量移除。 行单选添加、移除。 分页之后(全选或不选)状态标识依然存在2011-08-08
这篇文章主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
本篇文章主要介绍了理解javascript async的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
Javascript一向以他的灵活随意而著称，这也使得它的功能可以非常的强大，而由于没有比较好的调试工具，又使得它使用起来困难重重，尤其使对于一些初学者，更是感觉到无从下手。今天探讨的问题是用javascript获取textarea中光标的位置。2008-05-05
最新评论