JS 实现可拖拽编辑表格及内容计算

本文介绍如何利用 HTML5 新增的 draggable 和 contenteditable 属性，结合 JavaScript 实现网页版 Excel 的核心功能。通过动态创建表格、处理拖拽事件及数值计算，实现可自由调整行列位置并自动更新内容的交互式表格应用。

引言与背景

本文提供了一套使用 JavaScript 实现表格内容计算与拖拽功能的具体代码示例，供读者参考学习。

前言

目标是制作一个具备网页版 Excel 部分功能的表格应用。

利用 HTML5 新增的两个关键属性：draggable 用于实现元素的可拖拽功能，contenteditable 用于实现单元格内容的直接编辑。

代码实现细节

以下是具体的代码实现过程。

首先是 HTML 结构文件 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;
}

以上就是本文的全部内容，希望上述代码能对读者的学习有所帮助，同时也欢迎大家继续支持本站。

JavaScript 实现可拖拽与编辑的表格计算功能

引言与背景

实现效果展示

代码实现细节

实用工具推荐