动态增删表格行的代码分析

http://junglesong.yculblog.com/post.2688858.html

动态增删表格行列是Ajax处理的经典的代码,下面对其过程进行了分析.

通过Dom解析到某个表格,表格必须符合W3C标准,即以下的形式:

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

上面黑体部分是必须的.

先看怎么解析到这个表格:
var folderList=document.getElementById("folderList");

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

这下删除就好办了,直接这样:
folderList.removeChild(rowWillDelete);

要增加的话,需要创建出一行tr,下面是创建过程
var row=document.createElement("tr");// 创建tr
row.setAttribute("id",newFolderName);// 设置tr的id,也就是上面的 id="line1"部分
var cell=document.createElement("td");// 创建td
cell.appendChild(document.createTextNode(newFolderName));// 填充td里面的值,也就是上面的 <td>text</td>的text部分.
row.appendChild(cell);// 将td添加到tr

将tr增加到table可以这样:
document.getElementById("folderList").appendChild(row);

在td中增加什么内容可以根据情况设定,下面代码就加了自删除的按钮:
var deleteButton=document.createElement("input");// 创建input控件
deleteButton.setAttribute("type","button");// 设定input控件的类型为按钮
deleteButton.setAttribute("value","delete");// 设定按钮的显示文字
deleteButton.οnclick=function(){deleteFromFolderList(newFolderName);};// 这句很关键,这是按钮的事件处理,可以看到点击此按钮时会交给deleteFromFolderList处理
cell=document.createElement("td");// 这句上面说了
cell.appendChild(deleteButton);// 这句上面也说了

整个过程基本就这样,特别提醒的是书写js代码一要注意规范,二要细心调试,否则容易给自己带来麻烦.