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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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