js拖拉表格实现内容计算

2024-04-02 19:04:59 952人浏览薄情痞子

摘要

本文实例为大家分享了js拖拉表格实现内容计算的具体代码，供大家参考，具体内容如下前言制作网页版Excel H5新增功能：可拖拉-draggable,

本文实例为大家分享了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;
}

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

--结束END--

本文标题: js拖拉表格实现内容计算

本文链接: https://lsjlt.com/news/123941.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

js拖拉表格实现内容计算

本文实例为大家分享了js拖拉表格实现内容计算的具体代码，供大家参考，具体内容如下前言制作网页版Excel H5新增功能：可拖拉-draggable, ...

99+

2024-04-02
js实现表格拖动选项

本文实例为大家分享了js实现表格拖动选项的具体代码，供大家参考，具体内容如下题目要求如下图所示，具体思路：拖动改变选择项，用的的事件是js的拖动相关事件。代码： <!...

99+

2024-04-02
js实现表格拖动选项的方法

小编给大家分享一下js实现表格拖动选项的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体内容如下题目要求如下图所示，具体思路：拖动改变选择项，用的的事件是j...

99+

2023-06-14
js 实现div拖拽拉伸完整示例

目录前言HTMLCSSJS 前言今天和大家分享一下。如何用js实现div拖拽拉伸等功能。功能比较简单，我就不赘述了。直接上代码。 HTML <div class="resiz...

99+

2022-11-13

js 实现div拖拽拉伸 js 拖拽拉伸
Vue实现下拉表格组件

本文实例为大家分享了Vue实现下拉表格组件的具体代码，供大家参考，具体内容如下 <template> <div> <div class="s...

99+

2024-04-02
jquery实现表格行拖动排序

本文实例为大家分享了jquery实现表格行拖动排序的具体代码，供大家参考，具体内容如下引入JS <script src="jquery.min.js"></scr...

99+

2024-04-02
jQuery实现表格的数据拖拽

jQuery实现将一个ant-table的数据拖拽复制到另一个ant-table，供大家参考，具体内容如下需求 1、ant-design-vue2、将一个嵌套在drawer中的ta...

99+

2024-04-02
Vue中怎么用JS输出Excel表格内容

今天小编给大家分享一下Vue中怎么用JS输出Excel表格内容的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。问题：在vue项...

99+

2023-06-27
如何实现前端表格自动计算

这篇文章将为大家详细讲解有关如何实现前端表格自动计算，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。序言当我的团队进行税务系统模块开发的时候，我发现他们需要花费80%的时间去解决计算问题，尤其体现在表格（G...

99+

2023-06-08
拖拽插件sortable.js实现el-table表格拖拽效果

目录问题描述案例一简单拖拽代码附上案例二 el-table表格拖拽效果图代码附上问题描述 Sortable.js是一款优秀的js拖拽库，因为是原生js写的，所以性能不错，也支持移动...

99+

2024-04-02
JS实现苹果计算器

本文实例为大家分享了JS实现苹果计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> ...

99+

2024-04-02
js实现网页计算器

如何在利用HTML，css和js的知识制作一个简单的网页计算器呢？一个计算机中具备了：计算机整体框输入框输入按钮计算机整体框： #sho...

99+

2024-04-02
JS如何实现计算器

这篇文章将为大家详细讲解有关JS如何实现计算器，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。代码：<!DOCTYPE html> <html&...

99+

2024-04-02
JS怎么实现计算器

这篇文章主要为大家展示了“JS怎么实现计算器”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS怎么实现计算器”这篇文章吧。<!DOCTYPE h...

99+

2024-04-02
react 实现表格列表拖拽排序的示例

目录问题描述思路解析1. react-sortable-hoc2. array-move问题描述在项目开发中，遇到这样一个需求：需要对表格里面的数据进行拖拽排序。效果图如下所示：...

99+

2023-02-01

react 表格列表拖拽排序 react 拖拽排序
element表格行列拖拽的实现示例

element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现，先来看一下动态图，效果是不是你们想要的。首先需要安装Sortable.js ...

99+

2024-04-02
antdesign中实现table的表格行的拖拽

前言：首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的完全没有思路，然后就打开官网的文档进行观看。一开始准备写打开官网的一个文档是4...

99+

2024-04-02
vue+element-ui+sortable.js实现表格拖拽功能

本文实例为大家分享了vue+element-ui+sortable.js实现表格拖拽的具体代码，供大家参考，具体内容如下效果如下: 1.vue使用cli创建项目就不说了,本人使用...

99+

2024-04-02
jQuery如何实现表格的数据拖拽

这篇文章给大家分享的是有关jQuery如何实现表格的数据拖拽的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下需求ant-design-vue2、将一个嵌套在drawer中的table数据拖拽复制到dra...

99+

2023-06-29
jquery如何实现表格行拖动排序

这篇文章主要介绍了jquery如何实现表格行拖动排序，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体内容如下引入JS<script src="jq...

99+

2023-06-29