• 售前

  • 售后

热门帖子
入门百科

js拖沓表格实现内容盘算

[复制链接]
jimmy肖明 显示全部楼层 发表于 2021-10-26 13:27:11 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了js拖拉表格实现内容计算的详细代码,供各人参考,详细内容如下
媒介
       
  • 制作网页版Excel
       
       
  • H5新增功能:可拖拉-draggable, 可编辑-contenteditable
       

实现结果

代码实现
index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Table</title>
  6.     <style>
  7.         table, th, tr, td {
  8.             margin: 0;
  9.             padding: 0;
  10.             width: 800px;
  11.             text-align: center;
  12.             border: solid 1px #000;
  13.         }
  14.         td {
  15.             width: auto;
  16.             background-color: pink;
  17.         }
  18.         .ops {
  19.             cursor: move;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <table id="table">
  25.     <thead id="thead">
  26.     <tr id="header">
  27.         <th>1</th>
  28.     </tr>
  29.     </thead>
  30.     <tbody id="tbody">
  31.     </tbody>
  32. </table>
  33. <script src="main.js"></script>
  34. </body>
  35. </html>
复制代码
main.js
  1. createTable(10,10);
  2. init();
  3. // 表格初始化
  4. // @param1: rows, 行数
  5. // @param2: cols, 列数
  6. function createTable(rows, cols) {
  7.     let header = document.getElementById('header'),
  8.         body = document.getElementById('tbody');
  9.     for (let i = 0; i < rows; i ++){
  10.         let tmp = '',
  11.             trEle = document.createElement('tr');
  12.         for (let j = 0; j < cols; j ++){
  13.             //thead
  14.             if (i <= 1){
  15.                 tmp += `<th>${j}</th>`;
  16.             }
  17.             else {
  18.                 tmp += `<td class="ops" draggable="true">${i}</td>`;
  19.             }
  20.         }
  21.         // console.log(tmp);
  22.         if (i <= 1) header.innerHTML = tmp;
  23.         else{
  24.             trEle.innerHTML = tmp;
  25.             body.appendChild(trEle);
  26.         }
  27.     }
  28. }
  29. /*
  30. *   表格拖拽
  31. * */
  32. function init(){
  33.     let x,y,data;
  34.     document.body.addEventListener('click', event=>{
  35.         event.preventDefault();
  36.     });
  37.     document.body.addEventListener('dragstart', event => {
  38.         if (event.target.nodeName.toLowerCase() !== 'td'){
  39.             alert('选择正确的内容');
  40.             return false;
  41.         }
  42.         // console.log(event);
  43.         x = event.clientX - 5,
  44.         y = event.clientY - 5,
  45.         data = parseInt(event.target.firstChild.data);
  46.         let img = new Image();
  47.         img.src = 'test.png';
  48.         event.dataTransfer.setDragImage(img, 0,0);
  49.         // console.log(x, y, data);
  50.     });
  51.     //阻止默认处理
  52.     document.body.addEventListener('dragover', event => {
  53.         event.preventDefault();
  54.     });
  55.     document.body.addEventListener('drop', event => {
  56.         let tmp = new dragCalculation(x,y,data);
  57.         let endX = event.clientX - 5,
  58.             endY = event.clientY - 5,
  59.             endData = parseInt(event.target.firstChild.data);
  60.         // console.log(event.target.firstChild.data);
  61.         // console.log(isNaN(endData))
  62.         if (isNaN(endData)) {
  63.             alert('移动位置错误');
  64.             return false;
  65.         }
  66.         // console.log(endX, endY, endData);
  67.         let result = tmp.sum(endX, endY, endData);
  68.         event.target.firstChild.data = result;
  69.         event.target.style.backgroundColor = '#b4e318'
  70.     });
  71. }
  72. let dragCalculation = function (x, y, data){
  73.     this.startX = x;
  74.     this.startY = y;
  75.     this.startData = data;
  76. };
  77. dragCalculation.prototype.sum = function (x, y, data) {
  78.     //应该详细的边界判断
  79.     if (this.startX == x ||
  80.     this.startY == y ||
  81.     isNaN(data))   {
  82.         alert('不要放在原地不动');
  83.         return false;
  84.     }
  85. //    取和
  86.     return data + this.startData;
  87. }
复制代码
以上就是本文的全部内容,希望对各人的学习有所资助,也希望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作