正文

js拖拉表格实现内容计算

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0702

这篇文章主要为大家详细介绍了js拖拉表格实现内容计算，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js拖拉表格实现内容计算的具体代码，供大家参考，具体内容如下

前言

  • 制作网页版Excel
  • H5新增功能：可拖拉-draggable, 可编辑-contenteditable

实现结果

js拖拉表格实现内容计算

代码实现

index.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持米米素材网。

原文链接：https://blog.csdn.net/u013362192/article/details/115837290