js 动态改变div内部布局

要做这样一个功能，将检索出来的客户信息以名片的方式显示出来，　这样的功能没有什么问题可言，只是根据相应的名片布局将数据显

示出来而已，但主要的问题是要可动态改变名片样式，也就是说数据显示布局也得相应改变，以适应当前的名片样式，

刚开始并没有把它想的多么复杂，　让美工给一个公共table的定义，在换名片的同时，将table的样式随之一换，不就行了么，
但因为名片太多，而且布局基本都不一样，因此公共的table无法正确定义，

　因为没有好的实现方法，该功能的开发一直陷入僵局。到最后实在没有办法了，突然灵机一动，利用js生成table，然后织到div中去
不就成了么，依据这个想法，很快用js就写出了两个名片table的定义，分别放到两个js文件中(因为必须是相同的方法名), js文件的文

件名与缩略图文件名一样，为了以后调取方便。　下面是例码：

　function showHtmlByCard(userName, comName, comAdd, postCode, tel, mobile,fax,email, divId) {
var tableHtml = "<table width='100%' height='116' border='0' cellpadding='0' cellspacing='0'

bordercolor='#333333'>";
tableHtml += " <th height='35' align='left' valign='bottom' class='m1sy STYLE8' scope='col'>" +

userName + "</th>";
tableHtml += "<tr><th height='55' align='left' class='m1sy1' scope='col'>" + comName +

"</th></tr>";
tableHtml += "<tr><th align='left' class='m1sy1 textStyle' scope='col' style='font-size:14px;'>地

址：" + comAdd + "</th></tr></table>";
   tableHtml += "<table width='100%' height='80' border='0' cellpadding='0' cellspacing='0'>";
   tableHtml += "<tr><th height='19' colspan='2' class='m1sy2' scope='col'> </th></tr>";
   tableHtml += "<tr><th width='47%' height='19' class='m1sy2' scope='col'><div align='left'

class='textStyle'>邮编: " + postCode + "</div></th>";
tableHtml += "<th width='53%' class='m1sy2' scope='col'><div align='left' class='textStyle'>电

话: <a href='#' style='color:#F3E3CC;'>" + tel + "</a></div></th></tr>";
tableHtml += "<tr><th height='19' class='m1sy2' scope='col'><div align='left' class='textStyle'>传

真: <a href='#' style='color:#F3E3CC;'>" + fax + "</a></div></th>";
tableHtml += "<th height='19' class='m1sy2' scope='col'><div align='left' class='textStyle'>手机: <a

href='#' style='color:#F3E3CC;'>" + mobile + "</a></div></th></tr>";
tableHtml += "<tr><th height='19' colspan='2' class='m1sy2' scope='col'><div align='left'

class='textStyle'>E-mail: " + email + "</div></th></tr></table>";
document.getElementById(divId).innerHTML = tableHtml;
}　

调用:
<div class="<s:property value="jsSrc"/>" id="cardDiv${i.count}">

showHtmlByCard('<s:property value="userName" escape="false"/>', '<s:property value="companyName" escape="false"/>',

'<s:property value="companyAddress" escape="false"/>','<s:property value="companyPostcode" escape="false"/>', '<s:property

value="companyTel" escape="false"/>', '<s:property value="companyMob" escape="false"/>', '<s:property value="companyFax"

escape="false"/>', '<s:property value="companyMail" escape="false"/>', 'cardDiv${i.count}');

</script>

</div>
当然不知道这样做来完成该功能是否适合，有更好方法的可以留言说出来，谢谢

js 动态改变div内部布局

悦读