zoukankan      html  css  js  c++  java
  • 快速创建一个表格样式

    1.html文件

    <div id="detail"></div>

    2.JS文件

    var detail='<table class="formTable"  border="0" cellspacing="0" cellpadding="0" style="padding:0px; 808px; margin-top:20px; border-bottom:1px solid #dddddd;">';
         detail+="<tr style='display:block; margin-bottom:-20px;'><td style=' 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;客户名称:</td><td style=' 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+name+"</td></tr>";
         detail+="<tr style='display:block; margin-bottom:-20px;'><td style=' 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;手机号:</td><td style=' 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+mobile+"</td></tr>";
         detail+="<tr style='display:block; margin-bottom:-20px;'><td style=' 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;证件号:</td><td style=' 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+certNo+"</td></tr>";
    
         detail+="<tr style='display:block; margin-bottom:-20px;'><td style=' 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;标的名称:</td><td style=' 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+goodName+"</td></tr>";
         detail+="<tr style='display:block; margin-bottom:-20px;'><td style=' 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;车牌号码:</td><td style=' 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+plateNum+"</td></tr>";
        
         detail+="<tr style='display:block; margin-bottom:-20px;'><td style=' 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;保证金:</td><td style=' 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+bailPrice+"</td></tr>";
         detail+="<tr style='display:block; margin-bottom:-20px;'><td style=' 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;成交金额:</td><td style=' 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+price+"</td></tr>";
         detail+="<tr style='display:block; margin-bottom:-20px;'><td style=' 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;佣金及其他费用:</td><td style=' 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+commison+"</td></tr>";
    //     detail+="<tr style='display:block; margin-bottom:-20px;'><td style=' 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;总货款:</td><td style=' 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+totalPrice+"</td></tr>";
         detail+="<tr style='display:block; margin-bottom:-20px;'><td style=' 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;需支付金额:</td><td style=' 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;' id='payPrice'>&nbsp;&nbsp;"+payPrice+"</td></tr>";
         detail+="<tr style='display:block; margin-bottom:-20px;'><td style=' 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;剩余待支付金额:</td><td style=' 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;color:red;' id='surplusPayPrice'>&nbsp;&nbsp;"+payPrice+"</td></tr>";
        
         detail += '</table>';
         document.getElementById('detail').innerHTML = detail;



    其中包括,设置背景色和字体颜色效果(蓝色标识)

    3.效果图

  • 相关阅读:
    python学习,day4:装饰器的使用示例
    python学习,day3:函数式编程,递归和高阶函数
    JZ高中OJ 1385. 直角三角形
    JZ高中OJ 1382. 区间
    JZ高中OJ 3404. [NOIP2013模拟]卡牌游戏
    JZ高中OJ 3403. [NOIP2013模拟] 数列变换
    JZ高中OJ 1433. 数码问题
    JZ初中OJ 1339. disease
    JZ高中OJ 1432. 输油管道
    JZ初中OJ 1342. [南海2009初中]cowtract
  • 原文地址:https://www.cnblogs.com/mr-wuxiansheng/p/6622011.html
Copyright © 2011-2022 走看看