动态表格案例

这几天学习了Javaweb的一些知识。由于是初学Javaweb，所以从HTML一点点开始学习的，自学好几天终于学到了JavaScript，而今天也用刚学到了标签对象方法的内容，便用这个做了一个动态表格。其实这个做起来挺简单，步骤也比较固定。不过自己在做的过程中还是遇到了几个问题，在网页上看了许久都没看到错在那里，网上去查也没找到。后来终于看到了问题所在，于是写在博客中以此提醒自己。

这是我在学习DOM标签对象方法时对于如何实现创建添加节点对象，插入节点对象，删除节点对象的部分笔记：

添加：

document.createElements("标签名"); 创建节点对象

setAttribute("name","value");设置节点对象

插入：

appendChild("标签对象") ；添加子节点对象

insertBefore("新标签对象"，"指定标签对象") 在指定的对象前面添加子节点对象

删除：

removeChild("标签对象"); 删除子节点

常用的基本步骤：

1）创建一个对象

2）设置属性

3)在HTML页面中插入这个新建的对象

这次的动态表格案例，是属于DOM编程中的标签对象的方法的使用案例。实现动态表格的重点在于如何动态的增加和删除表格。

增加的基本代码：

    function addbtn() {

        //创建一个按钮
            // 1，创建一个input对象
            var input = document.createElement("input");
            //2，设置属性
            input.setAttribute("type","button");
            input.setAttribute("value","新按钮");

        //得到body对象
        var body = document.getElementsByTagName("body")[0];
        //此处需要注意要使用getElementsByTagName（）返回的是对象数组
        // ，由于只有一个body，因此body在第一个及在方法后面加上[0];

        //将input放到body中
        body.appendChild(input);
    }

删除的基本代码：

    function deletbtn() {
        //找到需要删除的节点对象
        //获取最后一个子标签
        var body = document.getElementsByTagName("body")[0];
        var lastChild = body.lastChild;
        //借助父节点删除子节点
        body.removeChild(lastChild);
    }

这里有提到子节点，父节点。原因在于：其实在HTML中标签与标签的关系是一个树的结构。这里就不在多说。

动态表格实现的具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
</head>
<script type="text/javascript">
    var count = 1;
    //增加一行表格
    function createnewLine() {
        count++;
     //创建tr对象
     var tr = document.createElement("tr");

     //创建6个td对象

        //编号
        var td1 = document.createElement("td");
        td1.innerHTML = count;

        //学号，姓名，成绩
        var td2 = document.createElement("td");
        var input2 = document.createElement("input");
        input2.setAttribute("type","text");
        //将input放入td中
        td2.appendChild(input2);

        var td3 = document.createElement("td");
        var input3 = document.createElement("input");
        input3.setAttribute("type","text");
        //将input放入td中
        td3.appendChild(input3);

        var td4 = document.createElement("td");
        var input4 = document.createElement("input");
        input4.setAttribute("type","text");
        //将input放入td中
        td4.appendChild(input4);

        var td5 = document.createElement("td");
        var input5 = document.createElement("input");
        input5.setAttribute("type","text");
        //将input放入td中
        td5.appendChild(input5);

        var td6 = document.createElement("td");
        var input6 = document.createElement("input");
        input6.setAttribute("type","text");
        //将input放入td中
        td6.appendChild(input6);

        //将6个td放入tr中；
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tr.appendChild(td5);
        tr.appendChild(td6);
        //将tr放入到tbody中
        var tbody = document.getElementsByTagName("tbody")[0];
        tbody.appendChild(tr);
    }

    //删除一行表格
    function deletLine() {
        //查找到要删除的节点
        if(count>1) {
            var tbody = document.getElementsByTagName("tbody")[0];
            var lastChild = tbody.lastChild;
            tbody.removeChild(lastChild);
            count--;
        }
    }
</script>
<body>
<table border="1" align="center" width = "500px">
    <thead>
<tr>
    <th>编号</th>
    <th>学号</th>
    <th>姓名</th>
    <th>语文成绩</th>
    <th>数学成绩</th>
    <th>英语成绩</th>
</tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="6"><input type="button" value="添加一行" onclick="createnewLine()">&nbsp;&nbsp;
            <input type="button" value="删除一行" onclick="deletLine()"></td>
    </tr>
    </tfoot>
</table>
</body>
</html>

运行效果图：

动态表格案例

动态表格的实现并不难，而自己在这个过程中被困住的问题是什么呢？

当时自己写好添加的方法点击却没有添加的效果，自己打开浏览器看错误，显示这么一个错误：

动态表格案例

动态表格案例（错误的代码行）

自己反复看了一会都没看到错在那里，网上去查找也没找到这种错误。查看了API才知道，getElementsByTagName();返回的是拥有指定标签名的所有元素，这里可以理解为返回了一个数组，而自己却没有正确的使用。于是便这样改正了一下，程序便能够正常运行了。

var tbody = document.getElementsByTagName("tbody")[0];//返回的是拥有指定标签名的所有元素

相关推荐