zoukankan      html  css  js  c++  java
  • layui-table 样式

    <!DOCTYPE html>
    <html>
    
    <head>
        <style>
            #lay-table {
                background-color: #fff;
                color: #666;
                border-collapse: collapse;
                border-spacing: 0;
            }
    
            #lay-table td {
                border- 1px;
                border-style: solid;
                border-color: #e6e6e6;
            }
        </style>
    
    <body>
        <table id="lay-table">
            <tr>
                <td>0001</td>
                <td>0002</td>
                <td>0003</td>
                <td>0004</td>
                <td>0005</td>
            </tr>
        </table>
    </body>
    </head>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
        <style>
            #lay-table {
                background-color: #fff;
                color: #666;
                border-collapse: collapse;
                border-spacing: 0;
                margin: 0 auto;
                margin-top: 20px;
            }
    
            #lay-table td {
                border- 2px;
                border-style: solid;
                border-color: #666;
                padding: 20px;
            }
        </style>
    
    <body>
    
    
        <table id="lay-table001" style="display:none;">
            <tr>
                <td>到访时间</td>
                <td colspan="3">
                    2020-01-02 10:60:60
                </td>
            </tr>
            <tr>
                <td>来宾姓名</td>
                <td>张宝珠</td>
                <td>联系电话</td>
                <td>1233313313313</td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td colspan="3">
                    41100001555588888664465
                </td>
            </tr>
            <tr>
                <td>来宾单位</td>
                <td>xxx科技公司</td>
                <td>来宾人数</td>
                <td>100</td>
            </tr>
            <tr>
                <td>访问部门</td>
                <td>技术部</td>
                <td>被访问人</td>
                <td>张小东</td>
            </tr>
            <tr>
                <td>携带物品</td>
                <td colspan="3">15箱A4打印机;</td>
            </tr>
            <tr>
                <td>事由</td>
                <td colspan="3">因啥啥啥,或者公司集体组织参观活动等等</td>
            </tr>
        </table>
    
        <div>
                <div style="text-align: center;margin-top: 50px;"><span style="font-size: 20px;font-weight: 600;">来访单</span></div>
                <table id="lay-table"><tr><td>到访时间</td><td colspan="3">2020-01-02 10:60:60</td></tr>
                    <tr><td>来宾姓名</td><td>张宝珠</td><td>联系电话</td><td>1233313313313</td></tr>
                    <tr><td>身份证号</td><td colspan="3">4110231555588888664465</td></tr>
                    <tr><td>来宾单位</td><td>xxx科技公司</td><td>来宾人数</td><td>100</td></tr>
                    <tr><td>访问部门</td><td>技术部</td><td>被访问人</td><td>张小东</td></tr>
                    <tr><td>携带物品</td><td colspan="3">15箱A4打印机;</td></tr>
                    <tr><td>事由</td><td colspan="3">因啥啥啥,或者公司集体组织参观活动等等</td></tr></table>
        </div>
      
    
    <script src="MyStringBuilderHanbleHelper.min.js"></script>
        <script>
            //获取值得方法1
                var model = {};
                var inputs = document.getElementsByTagName('input'); // 获取input集合
                for (var i = 0; i < inputs.length; i++) {
                    if (inputs[i].name.length > 0) {
                        model[inputs[i].name] = inputs[i].value;
                    }
                }
    
            var model = {};
            model["Phone"] = "1233313313313";
            model["time"] = "2020-01-02 10:60:60";
            model["VisitorName"] = "来宾姓名";
            model["CardID"] = "1233211234567";
            model["Unit"] = "来宾单位";
            model["VisitedDepart"] = "访问部门";
            model["VisitedName"] = "被访问人";
            model["Matter"] = "请假事由!!!";
            model["Valuable"] = "携带物品";
            model["Num"] = "来宾人数";
    
        var sb = new HandleHelper.MyStringBuilder();
        sb.appendFormat('<div>');
        sb.appendFormat('<div style="text-align: center;margin-top: 50px;"><span style="font-size: 20px;font-weight: 600;">来访单</span></div>');
        sb.appendFormat('<table id="lay-table"><tr><td>到访时间</td><td colspan="3">{0}</td></tr>',model.Phone);
        sb.appendFormat('<tr><td>来宾姓名</td><td>{0}</td><td>联系电话</td><td>{1}</td></tr>',model.VisitorName,model.Phone);
        sb.appendFormat('<tr><td>身份证号</td><td colspan="3">{0}</td></tr>',model.CardID);
        sb.appendFormat("<tr><td>来宾单位</td><td>{0}</td><td>来宾人数</td><td>{1}</td></tr>",model.Unit,model.Num);
        sb.appendFormat("<tr><td>访问部门</td><td>{0}</td><td>被访问人</td><td>{1}</td></tr>",model.VisitedDepart,model.VisitedName);
        sb.appendFormat('<tr><td>携带物品</td><td colspan="3">{0}</td></tr>',model.Valuable);
        sb.appendFormat('<tr><td>事由</td><td colspan="3">{0}</td></tr></table>',model.Matter);
        sb.appendFormat('</div>');
        document.body.innerHTML = sb.toString();
        //window.print();
    
        </script>
    </body>
    </head>
    
    </html>
  • 相关阅读:
    JAVA 练习1
    JSP基础
    网络协议
    mysql基础
    python之高级
    powershell基础
    python之迭代器与遍历
    python之面向对象
    linux常用命令
    docker 安装 ElasticSearch:7.4.2
  • 原文地址:https://www.cnblogs.com/enych/p/12377371.html
Copyright © 2011-2022 走看看