快速创建一个表格样式

简介: 1.html文件 2.JS文件var detail=''; detail+="  客户名称:  "+name+""; detail+="  手机号:  "+mobile+""; ...

1.html文件

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

 

2.JS文件

var detail='<table class="formTable"  border="0" cellspacing="0" cellpadding="0" style="padding:0px;width: 808px; margin-top:20px; border-bottom:1px solid #dddddd;">';
     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;客户名称:</td><td style='width: 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='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;手机号:</td><td style='width: 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='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;证件号:</td><td style='width: 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='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;标的名称:</td><td style='width: 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='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;车牌号码:</td><td style='width: 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='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;保证金:</td><td style='width: 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='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;成交金额:</td><td style='width: 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='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;佣金及其他费用:</td><td style='width: 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='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;总货款:</td><td style='width: 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='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;需支付金额:</td><td style='width: 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='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;剩余待支付金额:</td><td style='width: 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.效果图

 

相关文章
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
|
算法 Python
Python 技术篇 - 操作excel实现单元格合并并居中实例演示,用openpyxl库为指定区域的单元格设置对齐样式和字体样式方法
Python 技术篇 - 操作excel实现单元格合并并居中实例演示,用openpyxl库为指定区域的单元格设置对齐样式和字体样式方法
1067 0
Python 技术篇 - 操作excel实现单元格合并并居中实例演示,用openpyxl库为指定区域的单元格设置对齐样式和字体样式方法
|
5月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
elementui表格自定义表头的两种方法
这篇文章主要是总结了elementui-table表格怎么自定义表头,两种方式需求不一样,大家还有啥好的方法或者遇到的bug评论区留言大家一起解决。
970 0
|
6月前
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
|
6月前
element plus 表格组件怎样在表格中显示图片
element plus 表格组件怎样在表格中显示图片
273 0
|
监控 数据可视化 前端开发
S2 1.0:这个表格 「不简单」
S2 1.0:这个表格 「不简单」
284 0
|
前端开发 开发者
CSS 属性_列表、表格 | 学习笔记
快速学习 CSS 属性_列表、表格
CSS 属性_列表、表格 | 学习笔记
|
前端开发
关于Bootstrap 表格样式及表单布局的设置
讲解bootstrap、表格样式、表单布局、Bootstrap 实现表格样式、表单布局等。
309 0
关于Bootstrap 表格样式及表单布局的设置