• 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>
  • 相关阅读:
    牛客题霸NC15求二叉树的层序遍历Java题解
    牛客题霸NC105二分查找Java题解
    .net基本性本能优化问题
    urlRewriter
    元数据MetaData
    asp.net整体运行机制详解
    asp.net整体运行机制
    asp.net页面从初始化到卸载事件顺序
    Spring表达式语言之SpEL
    Spring 学习笔记（三）之注解
  • 原文地址：https://www.cnblogs.com/fxzemmm/p/14847910.html
Copyright © 2020-2023  润新知