纯js 渲染给表格合并

最新推荐文章于 2024-06-01 19:29:37 发布
最新推荐文章于 2024-06-01 19:29:37 发布
阅读量279 收藏
点赞数
分类专栏： js 文章标签： 大前端 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaosi1413/article/details/123781515
版权

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0051)http://localhost:8080/MDITIP/printOutContent.action -->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>打印</title>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />

    <style>
      h4 {
        font-size: 23px;
        font-weight: 400;
        width: 50%;
        text-align: center;
        margin: 0 auto;
      }

      em {
        font-style: normal;
      }

      b {
        margin-left: 20px;
      }

      input {
        border: 0;
        outline: none;
        cursor: pointer;
      }

      span {
        width: 30%;
        float: right;
      }

      table {
        width: 100%;
        border: 1px solid #222;
        border-top: none;
        border-bottom: none;
      }
      td {
        width: 15%;
        height: 44px;
        border: 1px solid #222;
        text-align: center;
      }

      #headerInfo td {
        width: 15%;
        height: 44px;
        border: 1px solid #222;
        text-align: center;
        /* word-wrap: break-word;
			word-break: normal; */
        page-break-after: always;
      }
      .pageBreak {
        page-break-after: always;
      }

      .noPrint {
        display: none;
      }
      @media print {
        .pageBreak {
          page-break-after: always;
        }

        .noPrint {
          display: none;
        }
      }
      /* .tablehtml{
			width: 100%;
			height: 2000px;
			background: rgb(221, 161, 161);
		} */
    </style>
  </head>

  <body>
    <div id="print-content">
      <div class="header">
        <h4>长阳土家族自治县职业教育中心学生学籍卡</h4>
      </div>
      <p>
        <b><em>经办人：</em><input type="text" /></b>
        <span>打印日期：</span>
      </p>
      <!-- 页面记录信息 -->
      <table cellpadding="0" cellspacing="0">
        <tr>
          <td>姓名</td>
          <td></td>
          <td>性别</td>
          <td></td>
          <td>出生日期</td>
          <td></td>
          <td rowspan="3">照片</td>
        </tr>
        <tr>
          <td>民族</td>
          <td></td>
          <td>政治面貌</td>
          <td></td>
          <td>班级</td>
          <td></td>
        </tr>
        <tr>
          <td>学号</td>
          <td></td>
          <td>学制</td>
          <td></td>
          <td>学籍号</td>
          <td></td>
        </tr>
        <tr>
          <td>年级</td>
          <td></td>
          <td>专业</td>
          <td></td>
          <td>身份证号</td>
          <td colspan="2"></td>
        </tr>
        <tr>
          <td>入学年月</td>
          <td></td>
          <td>入学方式</td>
          <td></td>
          <td>学习形式</td>
          <td colspan="2"></td>
        </tr>
        <tr>
          <td>家庭住址</td>
          <td colspan="3"></td>
          <td>毕业时间</td>
          <td colspan="2">
            <input type="text" style="width: 90%" />
          </td>
        </tr>
        <tr>
          <td>异动情况</td>
          <td colspan="7"><input type="text" style="width: 90%" /></td>
        </tr>
        <tr>
          <td colspan="8">学业成绩</td>
        </tr>
        <tr>
          <td>学期</td>
          <td>课程名称</td>
          <td>成绩</td>
          <td>课程名称</td>
          <td>成绩</td>
          <td>课程名称</td>
          <td>成绩</td>
        </tr>
      </table>
      <div class="tablehtml"></div>
    </div>
  </body>
</html>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(window).load(function () {
    var listData = [
      {
        trData: [
          {
            tdData: [
              { text: "语文", name: "100" },
              { text: "数学", name: "936" },
              { text: "物理", name: "78" },
            ],
          },
          {
            tdData: [
              { text: "语文", name: "10" },
              { text: "数2学", name: "6" },
              { text: "物2理", name: "78" },
            ],
          },
          {
            tdData: [
              { text: "语3文", name: "120" },
              { text: "数3学", name: "6" },
              { text: "物3理", name: "78" },
            ],
          },
        ],
      },
      {
        trData: [
          {
            tdData: [
              { text: "语文", name: "100" },
              { text: "数学", name: "936" },
              { text: "物理", name: "78" },
            ],
          },
          {
            tdData: [
              { text: "语文", name: "10" },
              { text: "数2学", name: "6" },
              { text: "物2理", name: "78" },
            ],
          },
          {
            tdData: [
              { text: "语3文", name: "120" },
              { text: "数3学", name: "6" },
              { text: "物3理", name: "78" },
            ],
          },
        ],
      },
    ];
    console.log("数据", listData);
    //  有六个学期
    var tableHtml = "";
    var str = "";
    var std = "";
    for (var j = 0; j < listData.length; j++) {
      var str = "";
      var std = "";
      tableHtml +=
        "<table cellpadding='0' cellspacing='0' id='table" + j + "'>";
      // 循环其五行tr
      for (var i = 0; i < listData[j].trData.length; i++) {
				// console.log("td",listData[j].trData[i].tdData,name)
        std = "";
        str += "<tr>";
          console.log(listData[j].trData[i].tdData.length,"22222")
        for (var k = 0; k < listData[j].trData[i].tdData.length; k++) {
					// console.log("td书",listData[j].trData[i].tdData[k].name)
          // std +=`<td rowspan='5'>第${j}学期</td>`
          if (k == 0) {
            if (i == 0) {
              std += `<td rowspan='5'>第${j + 1}学期</td>`;
            }
          } 
          // else {
					
          //   if (k % 2 == 0) {
					// 		console.log("td书3333",listData[j].trData[i].tdData[k].name)
          //     std += `<td>${listData[j].trData[i].tdData[k].name}</td>`;
          //   } else {
          //     std += `<td>${listData[j].trData[i].tdData[k].text}</td>`;
          //   }
          //   // if(k==2){
          //   // 	std +=`<td>${listData[j].text}</td>`
          //   // }
          //   // std +=`<td></td>`
          // }
          std += `<td>${listData[j].trData[i].tdData[k].text}</td><td>${listData[j].trData[i].tdData[k].name}</td>`;
          // if (k % 2 == 0) {
          //   console.log("kkkk",k)
					// 		console.log("td书3333",listData[j].trData[i].tdData[k].name)
          //     std += `<td>${listData[j].trData[i].tdData[k].text}</td><td>${listData[j].trData[i].tdData[k].name}</td>`;
          //   } else {
          //     std += `<td>${listData[j].trData[i].tdData[k].name}</td>`;
          //     console.log("4455444",listData[j].trData[i].tdData[k].text)
          //   }
        }
        str += std + "</tr>";
      }
      tableHtml += str + "</table>";
    }
    $(".tablehtml").html(tableHtml);

    var yiH = $("#table0").height();
    var erH = $("#table1").height();
    var sanH = $("#table2").height();
    var siH = $("#table3").height();
    var wuH = $("#table4").height();
    var liuH = $("#table5").height();
    var siNumH = erH + sanH + siH;
    // erDom.classList.add("pageBreak")
    $("#table1").addClass("pageBreak");
    // removeClass()
    if (yiH > 300) {
      $("#table0").addClass("pageBreak");
      $("#table5").addClass("pageBreak");
    }

    if (erH > 300) {
      $("#table0").addClass("pageBreak");
      $("#table1").removeClass("pageBreak");
    }

    if (sanH > 300) {
      $("#table1").removeClass("pageBreak");
      $("#table2").addClass("pageBreak");
      $("#table3").removeClass("pageBreak");
      $("#table4").removeClass("pageBreak");
    }
    if (siH > 400) {
      $("#table3").addClass("pageBreak");
      $("#table5").removeClass("pageBreak");
      $("#table4").removeClass("pageBreak");
    }
    if (wuH > 400) {
      $("#table4").addClass("pageBreak");
      liuDom.removeClass("pageBreak");
    }
    if (liuH > 400) {
      $("#table4").addClass("pageBreak");
    }
    if (yiH + erH > 200) {
      $("#table1").addClass("pageBreak");
      $("#table2").removeClass("pageBreak");
      $("#table3").removeClass("pageBreak");
      $("#table4").removeClass("pageBreak");
      $("#table5").removeClass("pageBreak");
    }
    if (erH + sanH > 600) {
      $("#table2").addClass("pageBreak");
      $("#table3").removeClass("pageBreak");
      $("#table4").removeClass("pageBreak");
      $("#table5").removeClass("pageBreak");
    }
    if (sanH + siH > 700) {
      // siDom.classList.add("pageBreak")
      $("#table4").removeClass("pageBreak");
      $("#table5").removeClass("pageBreak");
    }

    if (siH + wuH > 700) {
      $("#table4").addClass("pageBreak");
      $("#table5").removeClass("pageBreak");
    }

    if (erH + sanH + siH > 700) {
      $("#table2").addClass("pageBreak");
      $("#table3").removeClass("pageBreak");
      $("#table4").classList.add("pageBreak");
    }
  });
</script>
小四是个处女座
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用element ui表格合并列数据渲染的问题
weixin_42174401的博客
10-09 825
element ui的合并列 在项目中多多少少会用到表格,而在表格中有这样的表格 某一列是合并的,根据官方给出来的代码 前提是得把表格正常渲染出来,复制element ui 的官方文档就可以了,如何需要在前面加上编号,我是这样做的 rowspan () { this.tableData.forEach((item, index) => { if (index === 0) { this.spanArr.push(1) this.p
vue.js实现表格合并示例代码
10-21
最近工作中遇到一个需求，是要做一个页面放张大表格用来显示数据项，纯粹为了view层操作方便，就用了vue做渲染。然而又被提出了一个需求，需要相邻的相同值的行数据项进行单元格合并，这就醉了。没办法，只能想办法...
JavaScript-综合案例-渲染表格案例
最新发布
m0_64105917的博客
06-01 229
综合案例练习
table 表格合并js 渲染结果有点慢，但是效果没问题
dz525815的博客
11-07 671
/** * 操作表格 合并单元格 */ (function ($) { $.fn.mergeCell = function (options) { return this.each(function () { var cols = options.cols; for (var i = cols.length - 1; co...
layui 表格自动渲染数据合并单元格
weixin_43652106的博客
01-27 320
记录：layui 表格自动渲染数据合并单元格 table.render({ elem: '#Table', title:"", url: url, toolbar: '#toolbar', where: $('form').serialize(), // page: true, cols: [[ {titl
使用js根据数据动态拼接多级表格渲染
m0_46577631的博客
01-31 778
【代码】使用js根据数据动态拼接多级表格渲染。
原生table表格循环渲染，行合并
m0_37962105的博客
01-12 1718
<table> <tbody v-for="(item,index) in list" :key="index"> <tr > <td :rowspan='list[index].lis.length'>{{item.a}}</td> <td :rowspan='list[index].lis.length'>{{item.b}}</...
合并表格列和数据渲染
qq_44699270的博客
11-06 492
合并表格列和合并后的数据增添 需求：用ant-design-vue渲染一个表格,表格存在合并列,添加数据会使非合并列数量增加，合并列高度增加。 如下图： 点击添加后： 因为刚接触ant-design-vue,对其表格的设计实在是不太熟悉,肯定还有更好的实现方案,我这算是抛砖引玉了,希望有更好方案的前辈在评论区讨论。 ant-design-vue的合并行和合并列方法（没有找到无法实现上述要求的方案） 方法：customRender((value,row,index)=>{})（属于columns
前端-layui动态渲染表格行列与复杂表头合并
伊甸园的博客
09-15 2938
cols中传入[ [ ],[ ] ]这种数组类型的格式；拿到id 渲染位置表格。
通过多层嵌套数据渲染表格
nothing_2020的博客
04-13 908
一时语塞 还是先看效果吧 简单来说就是通过html和js渲染出以上效果 这道题的难点应该是，根据以下数据渲染出这个表格吧 let list = [{ courseName: '语文', detail: [{ grade: '小学一年级', detail: [{ Id: 1, className: '1班', num: 50 }, { Id: 2, className: '2班
Vue实现数据表格合并列rowspan效果
10-16
在本文中，我们将深入探讨如何使用Vue框架来实现数据表格中的列合并，特别是利用`rowspan`属性来达到这一效果。在实际应用中，合并列的需求常见于展示一对多关系的数据，例如显示一个学生的所有课程及其成绩。我们将...
微信小程序表格合并demo
11-21
在表格合并的实现中，你需要使用`<view>`或`<block>`标签来模拟表格结构，通过条件渲染和循环遍历数据来生成表格单元格。为了实现合并效果，你可能会利用`wx:if`和`wx:for`等指令控制不同单元格的显示。此外，可以...
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
avue 自定义按钮位置大全
xiaosi1413的博客
07-28 5053
新增弹框底部按钮 </template> -->` <!-- 导入数据 --> <!-- <template slot="menuForm"> <el-upload style="display: inline-block; margin-left: 10px" ref="upload" :limit="1" action="/api/blade_basic/company/import-c
富文本 考试 填空题
xiaosi1413的博客
06-25 2796
基于avue vue element 来实现的，使用的是百度富文本。有大神请指教
前端 访问本地 json 文件
xiaosi1413的博客
04-01 2634
控制台数据 <!DOCTYPE html> <!-- saved from url=(0243)file:///C:/Users/%E5%B0%8F%E5%9B%9B/Documents/WeChat%20Files/wxid_sekc1lcyarn422/FileStorage/File/2022-03/%E5%A1%94%E9%87%8C%E6%9C%A8%E8%81%8C%E4%B8%9A%E6%8A%80%E6%9C%AF%E5%AD%A6%E9%99%A2%E5%AD%A6.
前端 实时 获取 网络状态
xiaosi1413的博客
03-11 2214
前端实时获取网速
前端 打印 分页显示
xiaosi1413的博客
03-22 1498
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0051)http://localhost:8080/MDITIP/printOutContent.action --> <html xmlns="http://www.w3.org/1999/
前端导出excel表格合并
12-14
前端导出excel表格合并是指通过前端技术，将多个数据源中的数据合并成一个excel表格并进行导出的操作。这种操作一般会涉及到前端页面的数据处理、表格合并、样式设置以及excel文件的导出等多个方面。 首先，需要在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小四是个处女座

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值