JavaScript综合实验2

是君倩

于 2022-05-10 11:30:22 发布

阅读量837

点赞数 3

分类专栏： JAVAWEB 文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_52949203/article/details/124684371

版权

JAVAWEB 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何结合HTML、CSS和JavaScript来创建一个学生信息表，并实现动态添加和删除记录的功能。利用CSS设置了表格的样式，如实线边框和文本居中。JavaScriptDOM技术用于动态操作表格，当点击‘添加’按钮时，输入的编号、姓名和性别将被添加到表格中，同时提供了一个删除记录的链接，点击后会弹窗确认删除，实现表格记录的增删功能。

摘要由CSDN通过智能技术生成

一、实验目的

1.熟悉CSS的使用方法，能熟练定义CSS选择器，熟练书写CSS样式表；
2.掌握CSS设置网页的样式；
3.利用DOM技术实现动态操作网页元素。

二、实验内容

利用HTML，CSS和JavaScript三种技术完成表格页面级的操作，具体内容如下：
（1）利用HTML编写网页： “编号”、“姓名”、“性别”三个文本框，“添加”按钮，一个“学生信息表”表格；
（2）利用CSS设置表格的样式：实线边框，文本居中；
（3）运用JavaScript DOM技术实现表格增加和删除记录。
页面效果如下：
在这里插入图片描述

图1 初始界面
在这里插入图片描述

图2 添加记录
在这里插入图片描述

图3 删除记录
（4）网页命名为student.html。

主要用到的是dom创建新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>student</title>
    <style type="text/css">
        div {width:500px;border: 2px solid ;padding:10px;}
            span {position:absolute;left:50%;margin-left:-250px;}
    </style>
</head>
<body>
    <span>
        <div>
            编号：<input  id="id" type="text" size="20" maxlength="20" style="height: 20px;width: 50px; color:cyan">
        姓名：<input id="name" type="text" size="20" maxlength="20" style="height: 20px;width: 50px; color:cyan">
        性别：<input id="gender" type="text" size="20" maxlength="20" style="height: 20px;width: 50px; color:cyan">
        <button id="bt">添加</button>
        </div><br/>
        <h1 style="text-align: center;">学生信息表</h1>
        <table border="1" cellspacing="0" align="center" name="table">
            <tr>
                <th width="150">编号</th>
                <th width="150">姓名</th>
                <th width="150">性别</th>
                <th width="150">操作</th>
            </tr>
            <tr>
            </tr>

        </table>
      </span>

      <script type="text/javascript">
          var btn = document.getElementById("bt");
            btn.onclick = function (){
                var id=document.getElementById("id").value;
                var name=document.getElementById("name").value;
                var gender=document.getElementById("gender").value;

                var id_textNode = document.createTextNode(id);
                var name_textNode = document.createTextNode(name);
                var gender_textNode = document.createTextNode(gender);

                var id_td = document.createElement("td") ; //创建td 标签
                id_td.appendChild(id_textNode);
                var name_td = document.createElement("td") ; //创建td 标签
                name_td.appendChild(name_textNode);
                var gender_td = document.createElement("td") ; //创建td 标签
                gender_td.appendChild(gender_textNode);

                var a=document.createElement("a");
                var a_textNode = document.createTextNode("删除");
                a.appendChild(a_textNode);
                //添加给a标签
            
                //给a标签设置href属性和id属性
                a.setAttribute("href","javascript:void(0);");
                //给a标签添加点击事件 就是添加一个 onclick属性
                a.setAttribute("onclick","delTr(this);")
                a.setAttribute("id","a_delete");
                //a标签作为子标签添加给td
                var a_td = document.createElement("td");
                a_td.appendChild(a);

                var tr = document.createElement("tr");
                tr.appendChild(id_td);
                tr.appendChild(name_td);
                tr.appendChild(gender_td);
                tr.appendChild(a_td);
                var table = document.getElementsByTagName("table")[0] ; 
                table.appendChild(tr);
                
                document.getElementById("id").value=" ";
                document.getElementById("name").value=" ";
                document.getElementById("gender").value=" ";
            }

            function  delTr(obj){

                var r=confirm("确认删除？");
                if(r==true){
                    //我们想要删除一行 这个原理就是 使用父类标签去removeChild标签
        //我们想删除一行tr就是要找到tr的父亲td 但是我们现在只有一个a标签的对象 怎样找到  td呢：：
        //其实就是 找到 a的父标签 在通过父类标签得到爷爷标签 。。。
        var table = obj.parentNode.parentNode.parentNode;
        var tr  =obj.parentNode.parentNode;

        //让父亲去删除儿子
        table.removeChild(tr);
        // alert(table);
        // alert(tr);
                }
        
    }
      </script>
</body>
</html>

是君倩

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript综合实验2

一、实验目的1.熟悉CSS的使用方法，能熟练定义CSS选择器，熟练书写CSS样式表；2.掌握CSS设置网页的样式；3.利用DOM技术实现动态操作网页元素。二、实验内容利用HTML，CSS和JavaScript三种技术完成表格页面级的操作，具体内容如下：（1）利用HTML编写网页： “编号”、“姓名”、“性别”三个文本框，“添加”按钮，一个“学生信息表”表格；（2）利用CSS设置表格的样式：实线边框，文本居中；（3）运用JavaScript DOM技术实现表格增加和删除记录。页面效果如下：
复制链接

扫一扫