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 innerTableTr1 = document.createElement("tr"); innerTableTr1.appendChild(innerTableTd1); var tdHref = document.createElement("a"); tdHref.setAttribute('href','#'); tdHref.setAttribute('class','a2'); tdHref.setAttribute('onClick',"javascript:window.parent.addTab('" + url + "','" + name + "');"); tdHref.innerHTML = name; var innerTableTd2 = document.createElement("td"); innerTableTd2.setAttribute('class','button_font'); var innerTableTr2 = document.createElement("tr"); innerTableTd2.appendChild(tdHref); innerTableTr2.appendChild(innerTableTd2); var tbody = document.createElement("tbody"); tbody.appendChild(innerTableTr1); tbody.appendChild(innerTableTr2); var innerTable = document.createElement("table"); innerTable.setAttribute('width','131'); innerTable.setAttribute('border','0'); innerTable.setAttribute('cellspacing','0'); innerTable.setAttribute('cellpadding','0'); innerTable.appendChild(tbody);//////////////////////////////////// var td = document.createElement("td"); td.setAttribute('align','right'); td.setAttribute('valign','top'); td.setAttribute('class','button_back'); td.appendChild(innerTable); var tr = document.createElement("tr"); tr.appendChild(td); var tbody1 = document.createElement("tbody"); tbody1.appendChild(tr) var table = document.createElement("table"); table.setAttribute('width','183'); table.setAttribute('border','0'); table.setAttribute('cellspacing','0'); table.setAttribute('cellpadding','0'); table.appendChild(tbody1); var topTd = document.createElement("td"); //topTd.setAttribute('width','25%'); topTd.setAttribute('height','70'); topTd.setAttribute('align','center'); topTd.appendChild(table); return topTd; }</script><table id="start" border="1"> <tr onclick="alert(this.cells.length);"> <td width="30px" height="30px"></td> <td width="30px" ></td> <td width="30px" ></td> <td width="30px" ></td> </tr> <tr onclick="alert(this.cells.length);"> <td width="30px" height="30px"></td> <td width="30px" ></td> <td width="30px" ></td> <td width="30px" ></td> </tr></table><script type="text/javascript">var table = document.getElementById( 'start');//获取table var tableRows = table.rows;//获取table有多少行var lastRow = table.rows[tableRows.length-1];//获取最后一行var cellsLength = lastRow.cells.length; //获取最后一行有几列元素//var tableBody = table.firstChild;//获取tbody var tableBody=table.getElementsByTagName("tbody")[0];//兼容FF方式~//var lastchild = tableBody.lastChild;//获取tbody的最后一个 </tr> var lastchild=lastRow;//兼容FF方式~var url="我是一个可耻的地址",name="我是一个可耻的名字";if(cellsLength != 4){ var td = createTd(url,name); lastchild.appendChild(td); }else{ var td = createTd(url,name); var tr = document.createElement( 'tr'); tr.appendChild(td); tableBody.appendChild(tr); }</script></body></html>
[解决办法]