當前位置：
首頁 >
一段简单的表格样式
發布時間：2025/7/14
53
豆豆
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.效果圖
?
總結
- 上一篇： 掌握JAVA多线程的利器-线程池
- 下一篇： 个人作业一