一个网站的诞生- MagicDict未来予想図3 [表格的动态增加行和删除行，高手绕路]

表格的动态增加行和删除行，这样的文章在网络上面铺天盖地了。很多童鞋不知道怎么做，这里就彻底的解说一下。

任何动态操作HTML控件，归根到底是控制DOM。动态更新表格行的本质就是操作一个表格的DOM对象。

一个表格的DOM对象，最最顶层的是TABLE对象，首先，先取得一下这个TABLE对象

 

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

TABLE对象里面有1-N个TBODY对象。不过一般来说，我们的表格里面只有一个TBODY对象，我们要操作的就是这个包含了TABLEROW的TBODY对象。

 

            var bodies = WordTable.tBodies;
            var aBody = bodies[0];

有了TBODY对象后，剩下的事情就不是那么复杂了，这个TBODY对象有各种各样操作DATAROW的方法。具体资料，Google一下，什么都有了。推荐下面这个HTML资料：

http://www.phpchina.com/resource/manual/dhtml/objects/TBODY.html

动态添加行，有两个方法可以使用：

insertBefore	在文档层次中插入元素作为父对象的子结点。
insertRow	在表格中创建新行(tr)，并将行添加到 rows 集合中。

第一个方法是在指定行前插入一行，这个方法需要2个参数，一个是插入行对象，一个是指定行。[网络上一些文章不知道什么原因，缺少了第二的参数，导致FF通不过。一开始不知道原因，这个时候FireBug的JS控制台的信息派上了用场]。如果你想将行追加到整个表格的结尾，第二参数就写为Null。

aBody.insertBefore(row, null);

第二个方法没有测试过，估计，只是估计，直接将行追加到表格的末尾。

接下来就要定义这个Row对象了。一个Row对象，也是一个DOM，首先建立这个DOM

<tr>对象，所以就是createElement("tr")

var row = document.createElement("tr");

有了<tr>后，当然就是<th>或者<td>了，同样的建立一些th或td对象

 

var cellExplain = document.createElement("td");

把<td>轻松的放入Row里面去

 

row.appendChild(cellExplain);

 

当然，你完全可以给<td>设置一些属性后再放入Row中间

cellExplainInput.setAttribute("colspan", "3");

[IE核心的浏览器，好像不支持这样的写法。。。。晕，前台设计师伤不起啊。。。。每个浏览器有自己的标准，同样的语句不同的效果，有木有啊。。。。]

说到这个，讲一些题外话，可能用WinForm过来的程序员，我一开始以为可能JS对DOM设置特性是这样的

 

cellExplainInput.colspan= "3";

这句话也能执行成功，不过没有效果。后来想想，colspan 可能是个Attribute特性，不是一个Property属性，所以要setAttribute来做。这个以前在学习WPF的时候也遇到过同样的问题，现在看来是特性的天下了。。。

当然，你也可以通过InnerHTML给<tr>里面加任何东西，比如说一个文本框：

 

 var str = "<input type='text' style='width: 455px' name='txtEx" + RowCount + "' />";
            str = str + "<input  id='NewItem" + RowCount + "' class='buttonNormal' type='button' value='删除条目' onclick='RemoveRow(this)'/>";
            cellExplainInput.innerHTML = str;
            row.appendChild(cellExplainInput);

到这里，你应该可以将你想要的表格行加入到你的表格中了。

 

删除行也很简单，一般情况下，删除行，都是以一个行里面的按钮的行为为触发条件的。将按钮本身作为参数传给删除行的函数，通过这个按钮获得待删除的行，进而将这个行删除。【不然的话，你必须通过其他手段得到这个Row对象，比如说id,name.....]

下面这个代码中的obj表示一个行里面某个单元格的按钮。这个函数触发后，这个按钮所在行会被删除掉

        function RemoveRow(obj) {
            var WordTable = document.getElementById("WordTable");
            var bodies = WordTable.tBodies;
            var aBody = bodies[0];
            aBody.removeChild(obj.parentNode.parentNode);
        }

 

动态追加的行里面的东西怎么获得值呢，还是老样子，每个动态生成的东西，都加上不同的id和name，前台通过document.getElementById("CCCC").value 来取得.后台使用Request.Form["CCCC"]来取得.

 当然，如果你不想真正的删除行，只需要将行的Display设置为none即可。

        <script type="text/javascript" language="javascript">
            function delRow(lnk,username,kana,kanji) {
                var o = lnk.parentNode.parentNode;
                AddToWordBook('DEL', username, kana, kanji);
                o.style.display = "none";
            }
        </script>

 

完整的代码或者实例：

这个例子的演示页面：http://www.magicdict.com/Account/WordEditor.aspx

我想做一个在线的单词的编辑器，有点难度，不过应该可以完成。。。。。。 

 

网站地址 http://www.magicdict.com/

有兴趣的写信给我 root#magicdict.com   [convert # to @ ]

或者加MSN mynightelfplayer@hotmail.com