JavaScript综合实验2

这篇博客介绍了如何结合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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是君倩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值