JS DOM作业

最新推荐文章于 2022-11-15 23:21:14 发布

初级炼丹师Yiky--1229

最新推荐文章于 2022-11-15 23:21:14 发布

阅读量362

点赞数

分类专栏： JavaScript 文章标签： javascript html5 java js

本文链接：https://blog.csdn.net/weixin_44524687/article/details/117264374

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript 作业

文章目录

JavaScript 作业

给学生信息表动态添加信息、删除所选行的整条信息

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>学生信息表的添加与删除</title>
        <link rel="stylesheet" href="../css/DomHomework.css">
    </head>
    <body>
        <div id="in">
            <input type="text"id="intd1">
            <input type="text"id="intd2">
            <input type="text"id="intd3">
            <button onclick="add()">添加</button>
            <br><br>
        </div>
        <table border="1" id="tb">
            <caption>学生信息表</caption>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
        </table>
    </body>
</html>
<script>
    function add(){
        //获取输入的值
        let intd1=document.getElementById("intd1");
        let intd2=document.getElementById("intd2");
        let intd3=document.getElementById("intd3");
        let intd1value=intd1.value;
        let intd2value=intd2.value;
        let intd3value=intd3.value;
        //创建单元格对象，并赋值
        let td1=document.createElement("td");
        td1.innerText=intd1value;
        let td2=document.createElement("td");
        td2.innerText=intd2value;
        let td3=document.createElement("td");
        td3.innerText=intd3value;
        let td4=document.createElement("td");
        let a= document.createElement("a");
        a.innerText="删除";
        td4.appendChild(a);
        a.setAttribute("href","javascript:void(0);");
        a.setAttribute("onclick","deletetr(this)");
        

        //创建行标签
        let tr=document.createElement("tr");
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);

        //获取table对象
        let tb=document.getElementById("tb");
        tb.appendChild(tr);
    }
    function deletetr(obj){
        let tb=obj.parentElement.parentElement;
        let tr=obj.parentElement.parentElement;
        tb.remove(tr);
        
    }
</script>

思路分析

添加

getElementById("intd1");获取每个input标签中的值，document.createElement("td"); 创建单元格，把获取到的值赋值给每个单元格
let tr=document.createElement("tr");创建行， tr.appendChild(td1);把单元格添加到行当中

删除

每行最后一个单元格中创建a标签用于删除操作 a.setAttribute("href","javascript:void(0);");设置a属性链接不能跳转
a.setAttribute("onclick","deletetr(this)");设置a标签属性点击时间对应的功能delete（this）this用于指代点击的对象

function deletetr(obj){
        let tb=obj.parentElement.parentElement;
        let tr=obj.parentElement.parentElement;
        tb.remove(tr);
        
    }

先获取table对象tb，再获取a标签被点击的父元素tr， tb.remove(tr);删除这行

效果图

在这里插入图片描述

初级炼丹师Yiky--1229

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JS DOM作业

JavaScript 作业文章目录JavaScript 作业代码思路分析添加删除效果图给学生信息表动态添加信息、删除所选行的整条信息代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学生信息表的添加与删除</title> <link rel="stylesheet" href="../c
复制链接

扫一扫