日期:2014-05-16  浏览次数:20381 次

Js 动态添加table时 样式无法显示 求解~~~~~
我想创建一个这样的一个<td> 

<td width="25%" height="70" align="center">
  <table width="183" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td align="right" valign="top" class="button_back">
  <table width="131" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td height="13"></td>
  </tr>
  <tr>
  <td class="button_font"><a href="#" class="a2" onClick="javascript:window.parent.addTab('<%=shortCutList.get(index).get("URL")%>','<%=shortCutList.get(index).get("NAME")%>');"><%=shortCutList.get(index).get("NAME")%></a></td>
  </tr>
  </table>
  </td>
  </tr>
  </table>
</td>

具体创建过程是这样的:
function createTd(url,name){
var topTd = document.createElement("td");
topTd.setAttribute('width','25%');
topTd.setAttribute('height','70');
topTd.setAttribute('align','center');

var table = document.createElement("table");
table.setAttribute('width','183');
table.setAttribute('border','0');
table.setAttribute('cellspacing','0');
table.setAttribute('cellpadding','0');

var tr = document.createElement("tr");

var td = document.createElement("td");
td.setAttribute('align','right');
td.setAttribute('valign','top');
td.setAttribute('class','button_back');

var innerTable = document.createElement("table");
innerTable.setAttribute('width','131');
innerTable.setAttribute('border','0');
innerTable.setAttribute('cellspacing','0');
innerTable.setAttribute('cellpadding','0');

var innerTableTr1 = document.createElement("tr");

var innerTableTd1 = document.createElement("td");
innerTableTd1.setAttribute('height','13');

var innerTableTr2 = document.createElement("tr");

var innerTableTd2 = document.createElement("td");
innerTableTd2.setAttribute('class','button_font');

var tdHref = document.createElement("a");
tdHref.setAttribute('href','#');
tdHref.setAttribute('class','a2');
tdHref.setAttribute('onClick',"javascript:window.parent.addTab('" + url + "','" + name + "');");
tdHref.innerHTML = name;

innerTableTd2.appendChild(tdHref);
innerTableTr2.appendChild(innerTableTd2);

innerTableTr1.appendChild(innerTableTd1);

innerTable.appendChild(innerTableTr1);
innerTable.appendChild(innerTableTr2);

td.appendChild(innerTable);

tr.appendChild(td);

table.appendChild(tr);

topTd.appendChild(table);

return topTd;
}
但是穿件之后 添加到table中 无法显示样式 连接点了也没有效果 求高手

------解决方案--------------------
你是说,添加新的单元格后,破坏了原来表格的样式?

如果是这样,我的理解应该是 topTd 的width="25%"的原因
HTML code

<html>
<head>
<style>#at td{background:black;}</style>
</head>
<body>
<script type="text/javascript">
function createTd(url,name){

///////////////////////////////

 var innerTableTd1 = document.createElement("td");
 innerTableTd1.setAttribute('height','13');

 var innerTableT