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= "港澳居民來往內(nèi)地通行證";}else if(result.certType == "6"){certType= "臺灣同胞來往內(nèi)地通行證";}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;聯(lián)系電話:</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;聯(lián)系電話:</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;聯(lián)系電話:</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;聯(lián)系地址:</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;聯(lián)系地址:</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 : "關(guān)閉",handler : function() {detailLog.dialog('close');}} ]});

?

?

2.效果圖

?

總結(jié)

以上是生活随笔為你收集整理的一段简单的表格样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。