点击上面的表格出现下面的表格并打印（layui）

最新推荐文章于 2024-08-08 07:55:50 发布
最新推荐文章于 2024-08-08 07:55:50 发布
阅读量5.6k 收藏 6
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JINX1024/article/details/83105496
版权 
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../csscommom/layui.css"/>
    <script src="../../jscommom/layui.js " type="text/javascript" charset="utf-8"></script>
            <script language="javascript">
            function preview(oper)
            {
            if (oper < 10){
            bdhtml=window.document.body.innerHTML;//获取当前页的html代码
            sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
            eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
            prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
            window.document.body.innerHTML=prnhtml;
            window.print();
            window.document.body.innerHTML=bdhtml;
            } else {
            window.print();
            }
            }
        </script>
        <!--打印-->
</head>
<body>
    <style type="text/css">
        .layui-tab-item{
            margin-top: 100px;
        }
        .layui-this{
            background-color: orange;
        }
    </style>
    <div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">
        <table border="1" align="center" id="informationtable">
        <tr>
            <th>年龄1</th>
            <th>身高</th>
            <th>体重</th>
            <th>疾病史</th>
        </tr>
        <tr>
            <td>61岁    </td>
            <td>161cm</td>
            <td>61kg</td>
            <td>高血压、糖尿病</td>
        </tr>
    </table>
    </li>
    <!--标签1-->
    <li>
    <table border="1" align="center" id="informationtable">
        <tr>
            <th>年龄2</th>
            <th>身高</th>
            <th>体重</th>
            <th>疾病史</th>
        </tr>
        <tr>
            <td>61岁    </td>
            <td>161cm</td>
            <td>61kg</td>
            <td>高血压、糖尿病</td>
        </tr>
    </table>
    </li>
     <!--标签2-->
    <li>
    <table border="1" align="center" id="informationtable">
        <tr>
            <th>年龄2</th>
            <th>身高</th>
            <th>体重</th>
            <th>疾病史</th>
        </tr>
        <tr>
            <td>61岁    </td>
            <td>161cm</td>
            <td>61kg</td>
            <td>高血压、糖尿病</td>
        </tr>
    </table>
    </li>
    <!--标签3-->
    <li>
    <table border="1" align="center" id="informationtable">
        <tr>
            <th>年龄2</th>
            <th>身高</th>
            <th>体重</th>
            <th>疾病史</th>
        </tr>
        <tr>
            <td>61岁    </td>
            <td>161cm</td>
            <td>61kg</td>
            <td>高血压、糖尿病</td>
        </tr>
    </table>
    </li>
   <li>
       <!--标签4-->
    <table border="1" align="center" id="informationtable">
        <tr>
            <th>年龄2</th>
            <th>身高</th>
            <th>体重</th>
            <th>疾病史</th>
        </tr>
        <tr>
            <td>61岁    </td>
            <td>161cm</td>
            <td>61kg</td>
            <td>高血压、糖尿病</td>
        </tr>
    </table>
    </li>
    <!--标签5-->
  </ul>
  <!--startprint1-->
<!--打印内容开始-->
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
        <table border="1" align="center" id="informationtable">
        <tr>
            <th>年龄1</th>
            <th>身高</th>
            <th>体重</th>
            <th>疾病史</th>
        </tr>
        <tr>
            <td>61岁    </td>
            <td>161cm</td>
            <td>61kg</td>
            <td>高血压、糖尿病</td>
        </tr>
    </table>
    </div>
    <!--对应1-->
    <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
        <tr>
            <th>年龄2</th>
            <th>身高</th>
            <th>体重</th>
            <th>疾病史</th>
        </tr>
        <tr>
            <td>61岁    </td>
            <td>161cm</td>
            <td>61kg</td>
            <td>高血压、糖尿病</td>
        </tr>
    </table></div>
    <!--对应2-->
       <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
        <tr>
            <th>年龄3</th>
            <th>身高</th>
            <th>体重</th>
            <th>疾病史</th>
        </tr>
        <tr>
            <td>61岁    </td>
            <td>161cm</td>
            <td>61kg</td>
            <td>高血压、糖尿病</td>
        </tr>
    </table></div>
    <!--对应3-->
        <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
        <tr>
            <th>年龄4</th>
            <th>身高</th>
            <th>体重</th>
            <th>疾病史</th>
        </tr>
        <tr>
            <td>61岁    </td>
            <td>161cm</td>
            <td>61kg</td>
            <td>高血压、糖尿病</td>
        </tr>
    </table></div>
    <!--对应4-->
        <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
        <tr>
            <th>年龄5</th>
            <th>身高</th>
            <th>体重</th>
            <th>疾病史</th>
        </tr>
        <tr>
            <td>61岁    </td>
            <td>161cm</td>
            <td>61kg</td>
            <td>高血压、糖尿病</td>
        </tr>
    </table></div>
    <!--对应5-->
  </div>
  <!--打印内容结束-->
<!--endprint1-->
</div>
     <input type=button name='button_export' title='打印' onclick=preview(1) value=打印1>

<script>
layui.use('element', function(){
  var element = layui.element;
});
</script>
</body>
</html>

 

江苏省精神病院玛主任
关注
layui单据打印_layui打印表格自定义函数
weixin_35647899的博客
12-23 3536
函数如下function print (tablelayid){var v = document.createElement("div");var f = ["", "", "body{font-size: 12px; color: #666;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th,t...
layui的表格table选中数据后可打印本行数据
10-26
layui的表格table选中数据后可打印本行数据,未打印时不显示，只在打印页面显示打印内容。只是做了一个简单的demo，页面需要自己去画，方法已实现。有具体的指导步骤
layui自定义打印
星银色飞行船的博客
03-29 1万+
目录 自带的打印功能的实现 自定义打印内容的实现 自定义打印table的实现 一、 自带的打印功能的实现 在layui官网下载新的layui的js文件，有些旧版本的不支持 在table数据赋值时，添加如下参数 toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 二、 自定义打印内容的实现 三、 自定义打印table的实现 ......
Layui 项目教程
最新发布
gitblog_00931的博客
08-08 552
Layui 项目教程 layui项目地址:https://gitcode.com/gh_mirrors/lay/layui 1. 项目的目录结构及介绍 Layui 项目的目录结构如下： layui/ ├── dist/ │ ├── css/ │ ├── font/ │ ├── images/ │ └── layui.js ├── docs/ ├── examples/ ├── s...
layui表格打印全部数据
lqz1993的博客
01-16 1万+
layui table动态生成表格及筛选列后打印
weixin_72003717的博客
03-13 829
<i class="layui-icon layui-icon-print"></i>打印</a><a class= "layui-btn layui-btn-sm" id="inStock" > <i class="layui-icon layui-icon-home"></i>入库
layui 监听表格复选框选中值的方法
10-18
本篇将详细介绍如何在layui中监听表格复选框的选中值，并将其用于异步请求的参数。 首先，我们的目标是实现当用户在layui表格中勾选或取消复选框时，能够动态获取选中的数据项ID，并将其存储在一个数组中，以便在...
layui数据表格 table.render 报错的解决方法
10-16
在提供的报错信息中，提示是模板解析时出现了异常，这意味着Layui数据表格在渲染过程中可能由于某些配置问题导致解析Thymeleaf模板时出现了错误。 三、解决方法 在解决此类问题时，可以按照以下步骤操作： 1. 核对...
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
12-13
在新打开的页面中，我们使用layUI的`table`模块渲染一个数据表格，并监听行点击事件。当用户选择一行时，将选中的`id`保存到全局变量`conId`。 ```html layui.use('table', function(){ var table = layui....
Layui+Ajax带打印功能的管理系统.zip
07-31
该系统包含了权限管理、模块管理、配置管理和页面打印功能，代码齐全，sql脚本也包含在内，可正常运行，三周的任务量，仅供大家学习，可作为项目设计使用
layui打印自定义表格功能
挪威森林喵的博客
09-22 1614
layui打印自定义表格功能 打印预览表 按钮点击显示预览表，根据id获取数据，再绘制打印表 @Override layer.open({ type: 2, area: ['500px', '700px'], content: 'printSampleManager.html?'+ layui.data('version').v + '', btn: ['打印'], btnAlign: 'c'
layui table导出选中数据或导出所有数据，打印选中数据
chuanren1991的博客
11-12 4516
导出选中数据，导出当前查询条件下的所有数据 打印选中数据 var tableDataCount;//记录查询到数据的总条数 var exportUrl = 'xxx';//记录查询url var currTable = table.render({ elem: "#LAY-list-manage", url: exportUrl, where: whereStr, toolbar: '#toolbarDemo', defaultToolbar: ['filte
layui table 打印 下载 自定义
曾经也是个少年
03-14 885
image.png 表格加载完成时重新绑定lay事件 监听重新绑定的事件
Layui Table 表格
weixin_44546752的博客
04-18 196
首先引用jquery和layui.js插件 <script src="~/Plugins/jquery-3.2.1.min.js"></script> <script src="~/Plugins/layui/layui.js"></script> 视图：jquery部分 var layer, layuiTable;// ...
layui 弹出层中显示table 表格
qq_43303896的博客
04-28 1万+
html: html渲染的table <table id="JobTable" lay-filter="JobTable"></table> layui弹框渲染的table <#-- 弹框的table--> <div id="openProductBox" style="displa...
layui 的数据表单的defaultToolbar参数中筛选列，图标，打印，三个功能，调用单独拿出使用
L_Augety的博客
08-11 1万+
layui 的数据表格的defaultToolbar参数中筛选列，图标，打印，三个功能，调用自己按钮，单独拿出使用
LayUI使用--单击tabel数据表格操作，单击弹出层，弹出层表单动态获取table单条数据
热门推荐
qq_37306041的博客
05-22 2万+
1.页面基本元素&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt; &lt;%@ tagl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值