动态变动表格内容

cjnajr 2007-11-22 06:23:55

用dom来动态的改变表格的内容，包括添加和删除的操作。添加的操作在帖子（http://topic.csdn.net/u/20070124/10/f6d99a0e-15e6-454e-afda-a00a28ea17f0.html）里，大家有很好的方法，特别是该贴第三楼的代码。
为了大家明白我的意思，我把他的代码转贴在这里，并做了一点改动，改动的地方字体加粗了。

<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN " > 

<HTML > 

<HEAD > 

<TITLE >   New   Document   </TITLE > 

<META   NAME= "Generator "   CONTENT= "EditPlus " > 

<META   NAME= "Author "   CONTENT= " " > 

<META   NAME= "Keywords "   CONTENT= " " > 

<META   NAME= "Description "   CONTENT= " " > 

<script > 

function   addRow() 

{ 

var   t1=document.getElementById( "t1 "); 



var   divObj   =   document.createElement( "div "); 

var   row1   =   document.createElement( "TR "); 

row1.height   =   110; 

var col1=document.createElement( "TD "); 

col1.innerText = "1212 "; 

var   col2=document.createElement( "TD "); 

col2.innerText = "1212 "; 

var col3=document.createElement( "TD"); 

col3.innerText = "1212"; 

var   col4=document.createElement( "TD"); 

col4.innerText = "1212"; 

var   tbody=document.createElement( "tbody "); 

row1.appendChild(col1); 

row1.appendChild(col2); 

row1.appendChild(col3); 

row1.appendChild(col4); 

tbody.appendChild(row1); 

t1.appendChild(tbody); 



} 



</script > 

</HEAD > 



<BODY > 

<table   id= 't1 '   width= "850 "   border= "1 "   cellspacing= "0 "   cellpadding= "0 " > 

<tr   id= > 

<td> 编号 </td> <td> 索引 </td> <td> 开始日期 </td> <td> 内容 </td>  

<td >  </td > 

</tr > 



</table > 

<input   value= "添加行 "   name= "addBtn "   type= "button "   onClick= 'addRow() ' >   





</BODY > 

</HTML >

现在我的问题是如果我想删除表的内容，但是又不删除表头，那该怎么做呢？谢谢。
比如表的格式如下：
<table id="t1" cellpadding="1" cellspacing="0" border="1" width="90%">
<tr>
<td> 编号 </td> <td> 索引 </td> <td> 开始日期 </td> <td> 内容 </td>
</tr>
</table>

...全文