用appendChild方法给table加多一行的问题

Question

对于 table 添加行有专门的处理方法：
var b = document.getElementById('tableId');
var tr = b.insertRow(b.rows.length);
tr.id  = "id2";
tr.onclick = function(){alert('hello');}var td = tr.insertCell(tr.cells.length);
td.width = 25;
td.height= 20;
td.innerHTML = " "+ '2.';

Answer 1

这样新加一行我那段代码也没问题，关键是onmouseover、onmouseout、style这几个属性设置后对新加上的那行不起作用。

Answer 2

tr.onclick = function(){alert('hello');}
tr.onmouseover = function(){this.style.backgroundColor="#EEEEEE";}
tr.onmouseout  = function(){this.style.backgroundColor="";}
tr.style.backgroundColor = "#FFFFFF";
tr.style.fontSize = "12px";

Answer 3

也可以这样<table width="150" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tbody id="tbodyList">
  <tr valign="middle" id="id1" style="background-color:;color:#000000;font-szie:12px;cursor:hand;" onClick="javascript:abc();" onMouseOver="this.style.backgroundColor='#EEEEEE';" onMouseOut="this.style.backgroundColor='';">
    <td width="25" height="20" align="left">&nbsp;1.</td>
    <td width="125" align="left">我等到的花儿也谢了-</td>
  </tr>
  </tbody>
</table>
<script language="javascript">
b = document.getElementById('tbodyList'); var tr = document.createElement('<tr id=id2 onmouseover="this.style.backgroundColor=\'#eeeeee\';" onmouseout="this.style.backgroundColor=\'\';" '
+ ' onclick="alert(\'\');" style="background-color:#000000;color:#000000;font-szie:12px;cursor:hand;">');
var td = document.createElement('<td width=25 height=20 align=left>');
td.innerHTML ='&nbsp;' + '2.';
var td2 = document.createElement('<td width=25 height=20 align=left>');
//td2.innerHTML ="名字";
td2.appendChild(document.createTextNode("名字"));
    tr.appendChild(td);
tr.appendChild(td2);
b.appendChild(tr);
    
</script>