（20分求）动态添加表格元素设置id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body><script language="JavaScript1.2"> 
function add_unit(flag) 
{ 
the_table =  document.getElementById(flag); 
var n = the_table.cells.length; 
  if(n%the_table.rows.length==0) 
    { 
        var tr = the_table.insertRow(); 
    //在这里只能设置tr的id，我预期的是想设置第一列的id 不用设置行的id  怎么做？？ 
//tr.id = "t"+(n+1); 
        //tr.insertCell().innerHTML="t"+(n+1); 


var cell1 = document.createElement("td");
cell1.appendChild(document.createTextNode("t"+(n+1)));
cell1.id = "t"+(n+1); 
tr.appendChild(cell1);
    } 
    else 
        { 
//这里设置第二列 td的 id 
//the_table.rows[the_table.rows.length-1].id = "t"+(n+1); 
//the_table.rows[the_table.rows.length-1].insertCell().innerHTML="t"+(n+1);  var cell1 = document.createElement("td");
cell1.appendChild(document.createTextNode("t"+(n+1)));
cell1.id = "t"+(n+1); 
the_table.rows[the_table.rows.length-1].appendChild(cell1);} } 
</script> 
<body> 
<TABLE width=50% border=1 cellSpacing=0 cellPadding=2 id="PowerTable"> 
<TR align=middle bgColor=#ffcc00> 
<TD>列名1 </TD> 
<TD>列名2 </TD> 
</TR> 
</TABLE> <input type=button value=插入元素 onclick=add_unit('PowerTable')> </body>
</html>