一段简单的表格样式

简介: 1.JS文件 //这里的 dialog-alarm-detail 是一个DIV对象 var detailLog= $('#dialog-alarm-detail').

1.JS文件

       //这里的 dialog-alarm-detail 是一个DIV对象  <div id="dialog-alarm-detail" style="overflow: hidden;"></div>
        var detailLog= $('#dialog-alarm-detail').dialog(
                {
                    title: '竞买人信息',
                    width: 945,
                    height:'90%',
                    modal: true,
                    closable:true,
                    href: parent.baseUrl+"agency/indexDetail",
                    onLoad: function () {
                         var Qurl = parent.baseUrl+"agency/findOne/" + account;
                         $.ajax({  
                             type: "POST",  
                             async: false,  
                             url: Qurl,  
                             success: function (result) {
                                 var detail='<table class="formTable"  border="0" cellspacing="0" cellpadding="0" style="padding:0px;width: 808px; margin-top:20px; border-bottom:1px solid #dddddd;">';
                                 var certType="";
                                 if (result.certType == "0") {
                                     certType= "身份证";
                                 } else if(result.certType == "1"){
                                     certType= "户口簿";
                                 }else if(result.certType == "2"){
                                     certType= "护照";
                                 }else if(result.certType == "3"){
                                     certType= "军官证";
                                 }else if(result.certType == "4"){
                                     certType= "士兵证";
                                 }else if(result.certType == "5"){
                                     certType= "港澳居民来往内地通行证";
                                 }else if(result.certType == "6"){
                                     certType= "台湾同胞来往内地通行证";
                                 }else if(result.certType == "7"){
                                     certType= "临时身份证";
                                 }else if(result.certType == "8"){
                                     certType= "外国人居留证";
                                 }else if(result.certType == "9"){
                                     certType= "警官证";
                                 }else if(result.certType == "X"){
                                     certType= "其他证件";
                                 }
                                 
                                 if (result.account !=null ) {
                                     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;"+result.account+"</td></tr>";
                                } else {
                                     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;</td></tr>";
                                }
                                 
                                 if (result.typeDescribe !=null ) {
                                     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;"+result.typeDescribe+"</td></tr>";
                                } else {
                                     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;</td></tr>";
                                }
                                 
                                 if (result.customerName !=null ) {
                                     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;"+result.customerName+"</td></tr>";
                                } else {
                                     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;</td></tr>";
                                }
                                 
                                 
                                 if (result.certType !=null ) {
                                     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;"+certType+"</td></tr>";
                                } else {
                                     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;</td></tr>";
                                }
                                 
                                 
                                 if (result.certNo !=null ) {
                                     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;"+result.certNo+"</td></tr>";
                                } else {
                                     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;</td></tr>";
                                }
                                 
                                 
                                 if (result.mobile !=null ) {
                                     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;"+result.mobile+"</td></tr>";
                                } else {
                                     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;</td></tr>";
                                }
                                 
                                 if (result.fixPhone !=null ) {
                                     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;"+result.fixPhone+"</td></tr>";
                                } else {
                                     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;</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;"+result.mobile+"</td></tr>";
                                 
                                 if (result.email !=null ) {
                                     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;"+result.email+"</td></tr>";
                                } else {
                                     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;</td></tr>";
                                }
                                 
                                 
                                 if (result.customerAddress !=null ) {
                                     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;"+result.customerAddress+"</td></tr>";
                                 } else {
                                     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;</td></tr>";
                                 }
                                 
                                 
                                 if (result.postCode !=null ) {
                                     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;"+result.postCode+"</td></tr>";
                                 } else {
                                     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;</td></tr>";
                                 }
                                 
                                 detail += '</table>';
                                 detail += "<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>"
                                 document.getElementById('detail').innerHTML = detail;
                             }
                         });
                     },
                buttons : [ {
                    text : "关闭",
                    handler : function() {
                        detailLog.dialog('close');
                    }
                } ]
       });
    

 

 

2.效果图

 

相关文章
|
6月前
|
缓存 前端开发
样式
样式
60 3
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
|
SQL 自然语言处理 搜索推荐
|
监控 数据可视化 前端开发
S2 1.0:这个表格 「不简单」
S2 1.0:这个表格 「不简单」
284 0
|
前端开发
常用样式
常用样式
117 0
|
前端开发 容器
ElementUI表格表头行高问题解决
ElementUI表格表头行高问题解决
ElementUI表格表头行高问题解决
表格
表格
120 0
表格边框设置
其中,rules去表格内行和列的表格线,frame去表格边框。rules=rows去行.rules=cols去列frame=vsides 只显示左右frame=hsides 只显示上下frame=above 只显示上方
681 0
Element Plus修改表格行、单元格样式
Element Plus修改表格行、单元格样式
1773 0
|
Android开发
第12章 样式(六)
设备样式 Xamarin.Forms包含六种内置动态样式。 这些被称为设备样式,它们是名为Styles的嵌套类的成员。 这个Styles类定义了12个静态和只读字段,有助于在代码中引用这六个样式: Style样式的BodyStyle。
1293 0