js拖拉表格实现内容计算

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

前言

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

实现结果

代码实现

index.html

    
    
    



    

    

        
1
    
    
    


    

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 += `${j}`;
            }
            else {
                tmp += `${i}`;
            }
        }
        // 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;
}

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