javascript表格操作的快捷方法

一、表格的组成-<table>

表格式html中最复杂的标签之一，它的层次关系为table>thead/tbody/tfoot>tr>td,我们当然可以根据每一个标签创建一个javascript对象，然后将对象根据这个层次结构添加到父级结构中去，但是这样的操作很麻烦，javascript专门提供了操作表格的相关属性个方法。

二、javascript操作表格的属性和方法

1、<table>元素所对应的属性和方法

    caption  tBodies  tHead  tFoot   rows 

    createTHead()   deleteTHead()

    createTFoot()    deleteTFood()

    createCaption()    deleteCaption()

    insertRow(postion)   deleteRow(position)

2、<tbody>元素对应的属性和方法

    rows

    insertRow(posiyion)   deleteRow(position)

3、<tr>元素的属性和方法

    cells

    insertCell(position)   deleteCell(position)

三、实例演示

先创建一个html文档，内容如下：

<! doctype html >

< head >

     < meta   charset = "utf-8"  />

     < title > 表格操作演示 </ title >

     < script   type = "text/javascript"   src = "table.js" ></ script >

</ head >

< body >

     < p   id = "create"   onclick = "createTable()" > 创建表格 </ p >

     < div   id = "createTable" >

     </ div >

</ body >

然后添加javascript代码，如下：

function   createTable () {

     var   div  =  document . getElementById ( "createTable" );

     var   table  =  document . createElement ( "table" );  //创建一个表格

     div . appendChild ( table );

     table . style . border  =  "1px red solid" ;

     //表头

     var   thead  =  document . createElement ( "tbody" );  //创建一个表头

     thead . appendChild ( document . createTextNode ( "表格的标题头" ));  //给白头添加文字内容

     table . appendChild ( thead );

     //表格主体

     var   tbody  =  document . createElement ( "tbody" );  //创建表的主体

     var   row0  =  tbody . insertRow ( 0 );  //创建第一行

     row0 . insertCell ( 0 ). appendChild ( document . createTextNode ( "张三" ));

     row0 . insertCell ( 1 ). appendChild ( document . createTextNode ( "男" ));

     row0 . insertCell ( 2 ). appendChild ( document . createTextNode ( "23" ));

     var   row1  =  tbody . insertRow ( 1 );  //创建第二行

     row1 . insertCell ( 0 ). appendChild ( document . createTextNode ( "李四" ));

     row1 . insertCell ( 1 ). appendChild ( document . createTextNode ( "女" ));

     row1 . insertCell ( 2 ). appendChild ( document . createTextNode ( "25" ));

     table . appendChild ( tbody );

     //表尾

     table . createTFoot (). appendChild ( document . createTextNode ( "这是表格的尾部" ));

}

最后的运行结果为：