javascript动态创建删除表格

最近js动态创建删除表格用的时候发现了点小问题就是在IE里不允许将tr直接附加到table里，
而要先将tr附加到tbody中， 然后再将tbody附加到table下。 FireFox中不存在这个问题。
做了个小例子,有兴趣的可以试试

    

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<TABLE id="cssrain" style="border:1px solid #000;width:200px;" border="1" cellpadding="0" cellspacing="0">
<tr><td width="50%">姓名</td><td width="50%" colspan="2" align="center">地址</td></tr>
</TABLE>
<input type="button" onclick="addRow()" value="add" />
<input type="button" onclick="delRow()" value="del" />
<script>
function addRow(){
var table = document.getElementById("cssrain");
  if(table)
  {
   var newTr = document.createElement("tr");
  if(newTr)
  {
   //创建第一列
       var td_customer = document.createElement("td");
       td_customer.align = "center"; //设置位置
       td_customer.width = "19%" ;   //设置宽度
       td_customer.innerHTML = "aaa"; //表格内容(可以从数据库中读取)
       td_customer.id = "tID";//设置其ID
       td_customer.style.cursor = "hand";//设置其样式,类似超链接手形
       td_customer.style.whiteSpace = "nowrap";
       td_customer.style.backgroundColor = "red"; //背景色
       /**
        td_customer.style.   :.后面可以接html中style中的任何属性,只是style中的带"-"的要去掉,javascript中不支持,
        且"-"后的第一个字母要大写.
        */
       if(td_customer)
            newTr.appendChild(td_customer);
       //创建第二列
       var td_panyment = document.createElement("td");
       td_panyment.align = "center";
       td_panyment.colSpan= "2"; //注意这里是大写 colSpan 而不是colspan 注意大小写
       td_panyment.innerHTML= "bbb";
       if(td_panyment)
           newTr.appendChild(td_panyment);
       var tbody = document.createElement("TBODY");//这一步 不能少
           tbody.appendChild(newTr);//这一步 不能少
           table.appendChild(tbody);
  }else{
          alert("行不存在");
  }
  }else{
          alert("表格不存在");
  }
}

function delRow()
{
    var tableID = document.getElementById("cssrain");                
    var rowLength = tableID.rows.length;
    if(rowLength == 1)return;
    tableID.deleteRow(rowLength-1);    //删除最下面的行
}
</script>