【前端】JavaScript语言制作学生管理系统的细节累积

最新推荐文章于 2024-07-19 12:58:53 发布

@￥文竹￥

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量360

点赞数

分类专栏：小细节积累 JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Q20011102/article/details/132601621

版权

小细节积累同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

需求：

使用CSS：当鼠标移入时，该行的背景颜色为黄色，当鼠标移出时，该行的背景颜色还原；
当添加按钮“添加一行数据”时，文本框中的数据添加到表格中且文本框置空；
当点击表格中的“删除”时，该行数据被删除，删除前确认

实现效果：

在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        th {
            background-color: rgb(255, 231, 147);
        }

        hr {
            width: 520px;
        }

        tr:hover {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <table border="1" cellspacing="0" align="center" width="500" id="info">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>操作</th>

        </tr>
    </table>
    <hr>
    <div style="text-align: center;">
        学号:<input type="text" placeholder="请输入你的学号" id="number">
        姓名:<input type="text" placeholder="请输入你的姓名" id="name">
        <input type="button" value="添加" id="number" onclick="add()">
    </div>

</body>
<script>
    /* 
    
    思路：
    添加点击事件
    获取输入文本框的内容
    将输入框的内容追加到表格里面去 作为新的一行
    table的子元素是tr tr的子元素是td 我们元素是放到td里面 所以要有tr td元素标签
    创建tr 和 td
    */

    var infoObj = document.getElementById("info");
    var numberObj = document.getElementById("number");
    var nameObj = document.getElementById("name");

    function add() {
        // 创建tr 和 td
        var tr = document.createElement("tr");
        // 追加3列内容
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");

        td1.innerHTML = numberObj.value;;
        td2.innerHTML = nameObj.value;
        td3.innerHTML = "<a href='#' οnclick='remove(this)'>删除</a>"
        /*把td挂载到tr树上面*/

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);

        /*把tr添加到table树*/
        infoObj.appendChild(tr);
    }
    /*根据点击的a标签找到对应的父标签(td)再找到对应的父标签(tr)*/
    // 本来括号里面要写this的 但是this名字和function函数本身自带的this同名 
    // 所以换一个名 用that可以 这个that没有任何含义 只是一个元素的名字 用任何名字都可以 自己想一个名字就行
    function remove(that) {

        that.parentNode.parentNode.remove();

    }


</script>

</html>

细节考究

tr:hover(伪类选择器）:
是指当鼠标指针悬停在表格行（tr）上时，会触发某些特定的样式或行为
例如：
在这里插入图片描述
cellspacing=“0”:
表示表格中单元格之间的空白量为0
align=“center:”
表示表格的对齐格式为置中
placeholder :
方框里面的默认值或提示语
例如：

 学号:<input type="text" placeholder="请输入你的学号" id="number">

在这里插入图片描述
document.createElement(“标签名”):
创建一个元素

document.createElement(“td”) 创建的是一个元素，也就是表格的一个单元格。
document.createElement(“th”) 创建的是一个元素，也就是表格的头部单元格。
这两种元素有一些不同的属性，比如元素默认会被加粗和居中显示，而元素则不会

修改DOM树的方法：

将元素挂到DOM树上的方法	作用
父元素.appendChild(子元素)	父元素是DOM树中已经存在元素子元素是新创建的元素，把创建好的子元素挂到DOM树上，做为父元素的子元素。
父元素.removeChild(子元素)	将DOM树上某个元素的子元素删除
元素.remove()	自己删除本身这个元素

关于代码中的 tr.appendChild(td1) 和 td.appendChild(td1)；这两句有啥区别，为什么第二句不行

tr.appendChild(td1)： 的意思是将刚刚创建的元素(td1) 添加到元素中。
这样，元素就成为了元素的一个子元素，也就是说，元素被嵌套在了元素中。
不能用 td.appendChild(td1); 这种表述
td.appendChild(td1)：的意思是将刚刚创建的元素(td1) 添加到元素中，
但是，这是不正确的操作，因为元素是一个表格的单元格，它本身不应该再包含其他的单元格或者头部单元格。

关于表格：

td: ：“table data” 表示表格中的一个单元格，是表格中存储和展示具体数据的地方
th: ：“table header” ，表示表格的头部单元格，通常用于显示列的标题或者说明。与 td 元素不同的是，th 元素默认会被加粗和居中显示
tr: ： “table row”，表示表格中的一行。一个 tr 元素可以包含多个 td 或 th 元素，表示一行中的各个单元格

@￥文竹￥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端】JavaScript语言制作学生管理系统的细节累积

“table row”，表示表格中的一行。document.createElement(“td”) 创建的是一个元素，也就是表格的一个单元格。document.createElement(“th”) 创建的是一个元素，也就是表格的头部单元格。：“table data” 表示表格中的一个单元格，是表格中存储和展示具体数据的地方。这样，元素就成为了元素的一个子元素，也就是说，元素被嵌套在了元素中。，因为元素是一个表格的单元格，它本身不应该再包含其他的单元格或者头部单元格。
复制链接

扫一扫