js 根据行列动态画表格 Table

最新推荐文章于 2022-12-12 14:08:15 发布
最新推荐文章于 2022-12-12 14:08:15 发布
阅读量316 收藏 1
点赞数
文章标签： javascript 前端 html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56465807/article/details/125799465
版权

前言

        后端返回一个JSON串,返回了每个表格的行列,制定动态表格

实现的效果

后端返回的数据

let dataJsons = {
      reportDef: {
        name: "2 基金净值表现",
        type: "季报",
        freezeRow: 3,
        freezeCol: 3,
        tableDef: [
          {
            rowIndex: 1,
            colIndex: 1,
            colspan: 1,
            rowspan: 2,

            valueType: "普通文本",
            value: "阶段",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 1,
            colIndex: 2,
            colspan: 3,
            rowspan: 1,

            valueType: "普通文本",
            value: "净值增长率（%）",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 1,
            colIndex: 5,
            colspan: 3,
            rowspan: 1,

            valueType: "普通文本",
            value: "净值增长率（%）1",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 1,
            colIndex: 8,
            colspan: 3,
            rowspan: 1,

            valueType: "普通文本",
            value: "净值增长率（%）2",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 1,
            colIndex: 11,
            colspan: 3,
            rowspan: 1,

            valueType: "普通文本",
            value: "净值增长率（%）3",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 1,
            colIndex: 14,
            colspan: 1,
            rowspan: 2,

            valueType: "普通文本",
            value: "是否公共",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 2,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "托管金额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 3,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "外包金额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 4,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "差额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 5,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "托管金额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 6,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "外包金额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 7,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "差额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 8,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "托管金额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 9,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "外包金额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 10,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "差额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 11,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "托管金额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 12,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "外包金额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 2,
            colIndex: 13,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "差额",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 1,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "当日",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 1,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "自基金合同生效起至今",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 2,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "32",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 2,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "42",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 3,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "33",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 4,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "34",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 5,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "35",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 6,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "36",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 7,
            colspan: 1,
            rowspan: 1,
            valueType: "普通文本",
            value: "37",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 8,
            colspan: 1,
            rowspan: 1,
            valueType: "普通文本",
            value: "38",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 9,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "39",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 10,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "310",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 11,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "311",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 12,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "312",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 13,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "313",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 3,
            colIndex: 14,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "是",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 3,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "43",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 4,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "44",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 5,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "45",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 6,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "46",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 7,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "47",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 8,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "48",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 9,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "49",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 10,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "410",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 11,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "411",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 12,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "412",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 13,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "413",
            style: "font-weight:bold;text-align:center;",
          },
          {
            rowIndex: 4,
            colIndex: 14,
            colspan: 1,
            rowspan: 1,

            valueType: "普通文本",
            value: "否",
            style: "font-weight:bold;text-align:center;",
          },
        ],
      },
    };

获取行和列并去重排序

    let rows = [];
    let cols = [];
    let tableDef = dataJsons.reportDef.tableDef;
//拿到行和列并去重排序
    tableDef.map((item) => {
      rows.push(item.rowIndex);
      cols.push(item.colIndex);
    });
    let rowsArr = [...new Set(rows)].sort(function (a, b) {
      return a - b;
    });
    let colsArr = [...new Set(cols)].sort(function (a, b) {
      return a - b;
    });
//创建表格
    this.createTable(rowsArr, colsArr, tableDef);

创建动态表格

 createTable(rows, cols, tableDef) {
      let table = document.getElementById("table");
      var tab = '<table border=1 width=100% class="table">';
      for (var i = 0; i < rows.length; i++) {
        tab += "<tr>";
        let res = [];
        for (var j = 0; j < cols.length; j++) {
          res = tableDef.filter((item) => {
            return item.rowIndex == rows[i] && item.colIndex == cols[j];
          });

          if (res.length) {
            tab +=
              "<td colspan=" +
              res[0].colspan +
              " rowspan=" +
              res[0].rowspan +
              " style= " +
              res[0].style +
              ">" +
              res[0].value +
              "</td>";
          }
        }
        tab += "</tr>";
      }
      tab += "</table>";
      table.innerHTML = tab;
    },

滴滴答427
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【JS案例】——原生JS绘制表格及操作单元格
m0_50785976的博客
09-21 1753
原生JS绘制表格以及操作单元格
在vue中通过js动态绘制table，并且合并连续相同内容的行，支持点击编辑单元格内容
最新发布
青莳的博客
12-18 730
在vue中通过js动态绘制table，并且合并连续相同内容的行
JS绘制Table，及分页工具条绘制。纯基础
u011037218的博客
03-11 1539
这是一篇没有封面的文章.
javascript基础
weixin_44203609的博客
01-31 150
1.javascript入门 2.typeof 3.运算符 4.流程控制语句 和Java一样 5.数组 6.函数
js动态绘制表格，实现动态绘制，添加 和删除
05-23
js动态的绘制表格很好的例子，包括如何动态的去添加 修改 和删除表格 以及遍历表格内容
js操作table元素实现表格行列新增、删除技巧总结
10-23
主要介绍了js操作table元素实现表格行列新增、删除技巧,以实例形式分析总结了JavaScript针对table表格进行行列的增加与删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JS控制网页动态生成任意行列数表格的方法
12-10
本文实例讲述了JS控制网页动态生成任意行列数表格的方法。分享给大家供大家参考。具体分析如下： 这是一个非常简单使用的JS在线生成表格的代码效果 通过JS功能代码，直接输入行数和列数就可以自动生成你需要的表格 ...
javascript 绘制表格table,可以固定首行,首列
12-22
javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.
js动态创建、删除表格示例代码
12-11
生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号 方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充。 方法二：使用createElement生成...
基于JavaScript实现动态添加删除表格的行
12-28
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp <table id=viewTabs> 产品名称 编号 ...
使用js在页面中绘制表格核心代码
12-11
1.先写一个<table>，中间放入<tbody>，但是<tbogy>什么也不加  如何使用js在页面中绘制表格 2.在js中写入方法，绘制表格  如何使用js在页面中绘制表格 其核心语句就是： var row=document.createElement_x(“tr”); 就是创建行 var cell=document.createElement_x(“td”); 就是创建列 cell.appendChild(document.createTextNode(message)); 就是向列的每一个小格添加子节点和内容（必写） row.appendChild(cell); 就是将每一列（一个小格
js实现漂亮的table表格
07-26
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
JS绘制表格
科技之星==================>Future
09-14 1454
function submitHandler() { var cabType = $("#cabType").val(); if ($.validate.form()) { debugger; //检查箱子总数是否一致,列数和箱子数 var boxs = $('#boxNum').val();...
【JAVAScript】实例 ——创建表格并删除（以及知识扩展）
weixin_51612770的博客
05-14 1514
JAVAScript动态创建表格并删除 此次实例涉及到基础易忘Json语法，函数调用 文章目录JAVAScript动态创建表格并删除前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 这里先介绍一下此次案例使用的方法：Json和方法函数调用 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工
JavaScript 动态表格操作
wgchen
04-13 5020
阅读目录JavaScript 动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法1.1 Table 对象集合1.2 Table 对象方法1.3 Table 对象常用属性1.4 TableRow 对象TableRow 对象方法TableRow 对象属性1.5 TableCell 对象TableCell 对象属性JavaScript 实现点击显示和隐藏表格技术解答JavaScript 实现动态克隆一个表格技术解答JavaScript 实现动态点击改变单元格颜色技术解答 JavaScript 动态创建表
js样式创建可编辑表格
qq_64975782的博客
12-12 1138
js实现可编辑表格，支持删除行，只读，编辑
js算法--输入行列，生成一个表格（table）
热门推荐
xingguanghui_1134的专栏
08-27 1万+
html: 请输入行数: 请输入列数: 创建 javaScript: functino autocreate() { var line = document.getElementById('rows').value; var list = document.getElementById('cols').value; var
js实现表格按行滚动
weixin_55510188的博客
09-02 2770
3、滚动控制：为了实现按行滚动，需要拿到div表格的每一行的高度，然后定时、逐行执行滚动（即对tbody滚动高度值定时进行累加，每次累加表格行的高度，然后tbody的style属性的top取滚动高度值的负值）。1、表格模仿table的结构，使用div元素构建，其中在tbody外包了一层div(tbody-container)，以便对超出tbody-container的内容进行隐藏。最近又有同样的需求，不过是vue项目，所以又做了一个基于 js实现的表格按行滚动，原理相同。优化了表格内容见底后即滚回顶部。
简单的前端动态增加表格行列实例
qq_40950174的博客
12-15 3734
动态表格增加删除编辑列行
如何实现table表格行列自适应
05-25
可以使用JavaScript来动态计算表格的宽度和每列的宽度，从而实现表格的自适应。通过遍历表格的每个单元格，获取其内容的宽度，并将最大宽度作为列宽度，然后设置每列的宽度和表格的总宽度，从而实现表格的自适应。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值