Js 动态添加table时 样式无法显示 求解~解决方案

<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>