zoukankan html css js c++ java

javaScript操作DOM实现评论增加、删除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table width="1600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"
            bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment">
        <tr>
            <td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人</td>
            <td width="82%" align="center" bgcolor="#E5BB93">评论内容</td>
        </tr>
    </table><br>
    <form name="form1" method="post" action="">
        评论人:<input name="person" type="text" id="person" size="40">
        评论内容:<textarea name="content" cols="60" rows="3" id="content"></textarea><br><br>
        <input type="button" value="发表" onclick="addElement()">
        <input type="reset" value="清空">
        <input type="button" value="删除第一条评论" onclick="deleteFristE()">
        <input type="button" value="删除最后一条评论" onclick="deleteLastE()">
    </form>
    <script>
        function addElement(){ //增加评论
            var person = document.createTextNode(form1.person.value); //创建代表评论人的TextNode节点
            var content= document.createTextNode(form1.content.value);//创建代表评论内容的TextNode节点

            //创建td类型的Element节点
            var td_person = document.createElement("td");
            var td_content= document.createElement("td");

            //创建tr类型的Element节点
            var tr = document.createElement("tr");

            //创建一个tbody类型的Element节点
            var tbody = document.createElement("tbody");

            //将TextNode节点加入td类型的节点中
            td_person.appendChild(person);
            td_content.appendChild(content);

            //将td类型节点加入到tr节点中
            tr.appendChild(td_person);
            tr.appendChild(td_content);

            //将tr类型节点加入到tbody节点中
            tbody.appendChild(tr);

            //获取table对象
            var table = document.getElementById("comment");

            //将tbody加入table节点末尾
            table.appendChild(tbody);

            //清空输入文本框
            form1.person.value = "";
            form1.content.value = "";
        }
        function deleteFristE(){ //删除第一条评论
            var table = document.getElementById("comment");
            if(table.rows.length>1){
                table.deleteRow(1);
            }
        }
        function deleteLastE(){ //删除最后一条评论
            var table = document.getElementById("comment");
            if(table.rows.length>1){
                table.deleteRow(table.rows.length-1);
            }
        }
    </script>
</body>
</html>

查看全文

相关阅读:
跟KingDZ学HTML5之三画布Canvas
跟KingDZ学HTML5之七探究Canvas之各种特效
 跟KingDZ学HTML5之八 HTML5之Web Save
Aptana Studio 3 如何汉化，实现简体中文版
 跟KingDZ学HTML5之十一 HTML5 Form 表单新元素
 跟KingDZ学HTML5之九 HTML5新的 Input 种类
 跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性
 跟KingDZ学HTML5之十三 HTML5颜色选择器
 SSL协议运行机制
 门面模式到 socket

原文地址：https://www.cnblogs.com/fxzemmm/p/14847910.html