一段简单的表格样式
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;'> 用户名:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> "+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;'> 用户名:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> </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;'> 客户分类:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> "+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;'> 客户分类:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> </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;'> 客户名称:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> "+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;'> 客户名称:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> </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;'> 证件类型:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> "+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;'> 证件类型:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> </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;'> 证件号码:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> "+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;'> 证件号码:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> </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;'> 手机:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> "+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;'> 手机:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> </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;'> 联系电话:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> "+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;'> 联系电话:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> </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;'> 联系电话:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> "+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;'> 邮箱地址:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> "+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;'> 邮箱地址:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> </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;'> 联系地址:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> "+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;'> 联系地址:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> </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;'> 邮政编码:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> "+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;'> 邮政编码:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'> </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.效果图
