動(dòng)態(tài)增刪表格行列是Ajax處理的常用代碼,下面對(duì)其過(guò)程進(jìn)行了一些分析和總結(jié).

通過(guò)Dom解析到某個(gè)表格,表格必須符合W3C標(biāo)準(zhǔn),即以下的形式:

<table border="1">
 <tbody id="folderList">
  <tr id="line1">
    <td>text</td>
  </tr>
 </tbody>
</table>

上面黑體部分是必須的.

先看怎么解析到這個(gè)表格:
var folderList=document.getElementById("folderList");

再這樣解析到表格的一行:
var rowWillDelete=document.getElementById("line1");

這下刪除就好辦了,直接這樣:
folderList.removeChild(rowWillDelete);

要增加的話,需要?jiǎng)?chuàng)建出一行tr,下面是創(chuàng)建過(guò)程
var row=document.createElement("tr");// 創(chuàng)建tr
row.setAttribute("id",newFolderName);// 設(shè)置tr的id,也就是上面的 id="line1"部分
var cell=document.createElement("td");// 創(chuàng)建td
cell.appendChild(document.createTextNode(newFolderName));// 填充td里面的值,也就是上面的 <td>text</td>的text部分.
row.appendChild(cell);// 將td添加到tr

將tr增加到table可以這樣:
document.getElementById("folderList").appendChild(row);

在td中增加什么內(nèi)容可以根據(jù)情況設(shè)定,下面代碼就加了自刪除的按鈕:
var deleteButton=document.createElement("input");// 創(chuàng)建input控件
deleteButton.setAttribute("type","button");// 設(shè)定input控件的類型為按鈕
deleteButton.setAttribute("value","delete");// 設(shè)定按鈕的顯示文字
deleteButton.onclick=function(){deleteFromFolderList(newFolderName);};// 這句很關(guān)鍵,這是按鈕的事件處理,可以看到點(diǎn)擊此按鈕時(shí)會(huì)交給deleteFromFolderList處理
cell=document.createElement("td");// 這句上面說(shuō)了
cell.appendChild(deleteButton);// 這句上面也說(shuō)了

整個(gè)過(guò)程基本就這樣,特別提醒的是書(shū)寫(xiě)js代碼一要注意規(guī)范,二要細(xì)心調(diào)試,否則容易給自己帶來(lái)麻煩.

參考例子