一个网站的诞生- MagicDict未来予想図4 [表格的动态增加行和删除行，完整版]

时间：2011-06-11 来源：magicDict

首先，感谢路过秋天开源了他的系统，让园子里的童鞋有了新的研究方向，带动了园子的繁荣，拉动了园子的GDP。

昨天又花了一整天来做在线单词编辑器，动态表格的增加行和删除行的一些问题，基本算是搞明白了，大致想法还是和昨天一模一样的。这里只是说一些技巧和锦上添花的东西，算不上什么奇技淫巧。DOM这个玩意，真的很有趣，掌握以后可以做很多HTML的工具。

首先来说说我这个编辑器想要实现的功能：

1.可以动态在表格后面添加指定格式的行。可以是一行，也可以是多行。

2.当然也可以在指定行之前插入一行或者多行。

3.如果插入/添加的多行的话，这些行在删除的时候也必须一并删除。

4.单行的后面拥有插入行和删除行的按钮。插入什么样的行，也在这里指定。多行的话，这些功能按钮在首行表示。

5.某些行有特殊意义，必须给予特别的样式。

6 可以读出所有行的所有输入信息。

功能不算太难，不过，第一次做的朋友可能不是很容易就能完成的。

首先，插入和追加，都要动态生成控件，不同的是，一个要指定在哪行之前插入，一个则不需要。那么我们将这两个功能写在一个函数里面，参数就是在“某行”之前插入的“某行”。我们将这个函数命名为AddNewRow，参数“某行”RowObj。这里声明一下，RowObj 其实并不是表格行对象，而是表格行里面的按钮对象。通过表格行里面的按钮对象，可以获得表格行。追加的时候RowObj为Null。

其次，我们还要控制动态生成行的类型，我们称这个类型为RowType。如果是追加的时候，我们通过一个ID为ItemType的下拉列表框来选择行的类型。追加的时候，我么则通过每个行的下拉列表框来选择行的类型，这个列表框无需ID。

1         function AddNewRow(RowObj) {
2             var RowType;
3
4
5             if (RowObj == null) {
6                 RowType = document.getElementById("ItemType").value;
7             } else {
8                 RowType = RowObj.parentNode.childNodes[1].value;
9             }

RowObj.parentNode表示按钮的父控件，这里指包含按钮的单元格。RowObj.parentNode.childNodes[1]表示单元格里面的子控件数组。由于按钮和每个行的插入类型下拉框是兄弟，所以可以这样来获得下拉框。

接下来我们生成一个行对象：

            var WordTable = document.getElementById("WordTable");
            var bodies = WordTable.tBodies;
            var aBody = bodies[0];
            var row = document.createElement("tr");

有了行对象后，我们生成行的第一个单元格。我的编辑器，第一个单元格标识了行的名字。同时我们希望将种类为1的行，添加一个样式，就是指定一个类名。

1             var cellExplain = document.createElement("td");
2             switch (RowType){
3                 case "1":
4                     cellExplain.innerHTML = "解释";
5                     row.setAttribute("class", "Word_Start_td");
6                     break;
7                 case "2":
8                     cellExplain.innerHTML = "例句[日语]";
9                     break;
10                 case "3":
11                     cellExplain.innerHTML = "反义词";
12                     break;
13                 case "4":
14                     cellExplain.innerHTML = "主题";
15                     break;
16             }
17             row.appendChild(cellExplain);

设定一个单元格里面的内容有关innerHTML（FF中），设定样式也使用setAttribute。最后将这个单元格追加入行中。

使用同样的方法，我们加入第二个单元格，这里将展示合并单元格的代码：

colspan也可以设定

1             var str;
2             var cellExplainInput;
3             cellExplainInput = document.createElement("td");
4             cellExplainInput.setAttribute("colspan", "3");
5             switch (RowType) {
6                 case "1":
7                     str = "<input type='text' style='width: 400px' />"
8                     break;
9                 case "2":
10                     str = "<input type='text' style='width: 400px' />"
11                     break;
12                 case "3":
13                     str = "假名：<input type='text' style='width: 150px' /> "
14                     str += "汉字：<input type='text' style='width: 145px' />"
15                     break;
16                 case "4":
17                     str = "<input type='text' style='width: 400px' />"
18                     break;
19             }
20             cellExplainInput.innerHTML = str;
21             row.appendChild(cellExplainInput);

接下来，我们希望在每行里面，或者是多行的首行里面追加1个插入行按钮，一个下拉列表框内容，一个删除行按钮。

cellExplainInput = document.createElement("td");
            cellExplainInput.setAttribute("colspan", "2");
            cellExplainInput.setAttribute("align", "right");
            str = "<input  class='buttonNormal' type='button' value='插入行' onclick='AddNewRow(this)'/>"
            str += "<select id='ItemType'>";
            str += "<option value='1'>解释</option>";
            str += "<option value='2'>例句</option>";
            str += "<option value='3'>反义词</option>";
            str += "<option value='4'>主题</option>";
            str += "</select>";
            str += "<input class='buttonNormal' type='button' value='删除行' onclick='RemoveRow(this)'/>"
            cellExplainInput.innerHTML = str;
            row.appendChild(cellExplainInput);

请注意，这里的下拉列表框和按钮，是兄弟关系，都在同一个单元格里面。

好了，有了行以后我们可以追加行或者插入行了。

insertBefore没有第二参数，则是追加到最后，有的话则是插入到指定位置之前。

1                 if (RowObj == null) {
2                     aBody.insertBefore(row, null);
3                 } else {
4                     aBody.insertBefore(row, RowObj.parentNode.parentNode);
5                 }
6                 RowCount = RowCount + 1;

最后，我们希望如果是类型为2的行，应该是同时拥有2行一组的多行类型。

这个也很简单，如果是追加的话，追加了首行后，追加第二行。如果是插入的话，在指定行之前顺序插入第一行后，在插入第二行。

                if (RowObj == null) {
                    aBody.insertBefore(row, null);
                } else {
                    aBody.insertBefore(row, RowObj.parentNode.parentNode);
                }

                var row = document.createElement("tr");
                cellExplain = document.createElement("td");
                cellExplain.innerHTML = "例句[中文]";
                row.appendChild(cellExplain);

                cellExplainInput = document.createElement("td");
                cellExplainInput.setAttribute("colspan", "3");
                str = "<input type='text' style='width: 400px' />"
                cellExplainInput.innerHTML = str;
                row.appendChild(cellExplainInput);

                cellExplainInput = document.createElement("td");
                cellExplainInput.setAttribute("colspan", "2");
                str = " "
                cellExplainInput.innerHTML = str;
                row.appendChild(cellExplainInput);

                if (RowObj == null) {
                    aBody.insertBefore(row, null);
                } else {
                    aBody.insertBefore(row, RowObj.parentNode.parentNode);
                }

                RowCount = RowCount + 2;

删除行的代码很简单，先贴出来，再解释。

如果是单行的话，直接删除掉。。。

如果是2行一组的多行，必须同时删除两个行。这个行的认定，我们通过行的第一个单元格内容来判断。

删除的时候先删除第二行，再删除首行。[首行删除了，第二行定位有些麻烦]。

row.nextSibling表示首行的下一行。