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;
}

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

(0)

相关推荐

  • JavaScript 如何计算文本的行数的实现

    需求:根据行数决定是否限制展开和收起. 思路:用2个块统计行高,一个不加高度限制用来统计行数(css隐藏),一个加高度限制用来显示(加高度限制会导致统计行数不准) 要想知道文本的行数,那就需要知道文本的总高度和每一行的高度,总高度除以行高就是行数.当然总高度的计算必须是文字所在的 DOM 没有对高度的限制,随着文本的增加 DOM 要随之变高才行:最后还要考虑 DOM 的样式padding和margin对高度的影响.这样一来我们就可以计算出文本的行数了.总结一下我们需要如下几步: 克隆文本所在的

  • 超精准的javascript验证身份证号的具体实现方法

    编写程序前先来了解下身份证号的构成: 身份证号分为两种,旧的为15位,新的为18位. 身份证15位编码规则:dddddd yymmdd xx p    其中 dddddd:地区码    yymmdd: 出生年月日    xx: 顺序类编码,无法确定    p: 性别,奇数为男,偶数为女: 身份证18位编码规则:dddddd yyyymmdd xxx y    其中 dddddd:地区码    yyyymmdd: 出生年月日     xxx:顺序类编码,无法确定,奇数为男,偶数为女    y: 校

  • js精准计算

    var numA = 0.1; var numB = 0.2; alert( numA + numB ); 0.1 + 0.2 = 0.30000000000000004. 计算精度误差问题(和二进制相关). 对于浮点数的四则运算,几乎所有的编程语言都会有类似精度误差的问题,只不过在 C++/C#/Java 这些语言中已经封装好了方法来避免精度的问题,而JavaScript是一门弱类型的语言,从设计思想上就没有对浮点数有个严格的数据类型,所以精度误差的问题就显得格外突出. 我们先把 0.1 和

  • js实现一个简易的计算器

    利用原生js实现一个简易的计算器(附详细注释),供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&

  • JS实现苹果计算器

    本文实例为大家分享了JS实现苹果计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手机</title> <style type="text/css"> #phone{ position: relative; width: 380px; height: 700px; box

  • JavaScript经典案例之简易计算器

    本文实例为大家分享了JavaScript实现简易计算器的具体代码,供大家参考,具体内容如下 效果图: 逻辑: 1.首先通过遍历,为所有元素添加事件: 2.各个按钮功能分别实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic

  • javascript实现简易计算器功能

    本文实例为大家分享了javascript实现简易计算器的具体代码,供大家参考,具体内容如下 功能: 1.实现单击数字按钮输入数字 2.实现基础四则运算功能,并添加必要的异常处理,例如:除数不能为零 3.实现小数点添加功能,并添加异常处理,小数点只能出现一次 4.实现正负号功能 5.实现回退功能,已经是最后一位时,显示框显示为零 6.清屏功能 使用的知识点: 1.利用大量的自定义函数实现业务逻辑 2.灵活运用事件及事件处理 3.培养异常处理的编程方法 4.培养并实践利用不同思路实现编程 综合练习目

  • js精准的倒计时函数分享

    先看看倒计时效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时函数</title> <script> var timer=(function(){ return function (json){ if(json.currentTime){ var now=new Date(

  • javascript模拟实现计算器

    本文实例为大家分享了javascript模拟实现计算器的具体代码,供大家参考,具体内容如下 功能: 1.实现单击按钮录入数字 2.实现基础四则运算功能,并添加必要的异常处理. 3.实现小数点功能并添加异常处理:小数点只能出现一次 4.实现正负号功能 5.实现退位功能,已经是最后一位时,显示框显示为0 6.AC清屏功能 使用的知识点: 1.利用大量的自定义函数实现业务逻辑 2.灵活运用事件及事件处理 3.培养异常处理的编程方法 4.培养并实践利用不同思路实现编程 综合练习的目的: 1.将css,h

  • js拖拉表格实现内容计算

    本文实例为大家分享了js拖拉表格实现内容计算的具体代码,供大家参考,具体内容如下 前言 制作网页版Excel H5新增功能:可拖拉-draggable, 可编辑-contenteditable 实现结果 代码实现 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Table</title&g

  • Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法

    Index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格内容溢出省略号显示</title> <style type="text/css"> .contain { font-family: ' Microsoft YaHei '; margin: 15px

  • JS实现控制表格行内容垂直对齐的方法

    本文实例讲述了JS实现控制表格行内容垂直对齐的方法.分享给大家供大家参考.具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶.可以居中.可以底部对齐 <!DOCTYPE html> <html> <head> <script> function topAlign() { document.getElementById('tr2').vAlign="top"; } </script> <

  • JS获取表格内指定单元格html内容的方法

    本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组,然后定位指定的单元格,通过单元格的innerHTML属性获得单元格的html内容 <!DOCTYPE html> <html> <head> <script> function cell() { var x=document.getElementById('myTable').rows[0].cells;

  • vue.js的简单自动求和计算实例

    一.导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> 二.前端页面 我用了一个表格,话不多说直接上代码 <div id="vuetest"> <table> <tr> <td>数学</td>

  • JS手机端touch事件计算滑动距离的方法示例

    本文实例讲述了JS手机端touch事件计算滑动距离的方法.分享给大家供大家参考,具体如下: 计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下: function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body"); body.bind('touchstart',function(event){ var touch = event.tar

  • Vue.js+Layer表格数据绑定与实现更新的实例

    一:先使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据 <div id="content"> <table class="mytable"> <tr class="header"> <td>选择</td> <td>用户名</td> <td>学号</td>

  • Vue.js实现表格渲染的方法

    我们大多时候渲染表格都是key值在页面上写死的情况下,一个个value渲染,那我们遇到数据是键值对的时候该如何渲染呢? 我们查看vue的官方文档,如下: 值域 v-for v-for 也可以接收一个整数,此时它将重复模板数次. <div> <span v-for="n in 10">{{ n }} </span> </div> 结果: 那我们就可以通过如下方法来渲染列表: <table class="table table

  • JS获取表格视图所选行号的ids过程解析

    这篇文章主要介绍了JS获取表格视图所选行号的ids过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实例化数组 遍历所选行push到数组中 将数组join转换为以,分割的字符串 /*获取指定id的datagrid的表格视图的选择的ids*/ function getDataGridSelectRowIDS(id){ var ids = []; var rows = $('#'+id).datagrid('getSelections');

  • js实现表格数据搜索

    本文实例为大家分享了js实现表格数据搜索的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格数据搜索</title> <link href="../css/表格数据搜索.css" rel="external nofollow&quo

随机推荐