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>

查看全文

相关阅读:
transformer的pytorch代码讲解
 idea 提交远程库冲突解决
 程序员文档编辑神器typora
C#-Xamarin的Android项目开发(二)——控件应用
 2020最新全栈必备 Redis，你还不了解么
 2020JAVA最新应对各种OOM代码样例及解决办法
 java8中parallelStream提升数倍查询效率是怎样实现的，来看看这篇文章
 Spring当中循环依赖很少有人讲，今天一起来学习！
PE 文件格式详解
 Mysql 添加字段、修改字段、删除字段

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