首页 > 编程语言 >DOM_Node对象与案例4_动态表格_添加

DOM_Node对象与案例4_动态表格_添加

时间:2022-11-22 17:12:37浏览次数:57  
标签:Node appendChild 表格 DOM tr var td document 节点

DOM_Node对象

节点可以是元素节点、属性节点、文本节点,或者也可以是"节点类型"那一节中所介绍的任何一种节点。
请注意,虽然所有的对象均能继承用于处理父节点和子节点的属性和方法,但是并不是所有的对象都拥有父节点或子节点。例如文本节点不能拥有子节点,所以向类似的节点添加子节点就会导致DOM错误。
IE: Internet Explorer,F: Firefox, o: Opera, W3C:万维网联盟(因特网标准) 

 

Node:节点对象,其他5个的父对象

    特点:所有dom对象都有可以被认为是一个节点

    方法:

      *appendchild():向节点的子节点列表的结尾添加新的子节点。

      *removechild():删除(并返回)当前节点的指定子节点。

      *replacechild():用新节点替换一个子节点。

    属性  

      * parentNode 返回节点的父节点。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>

        div{

            border: 1px solid red;

        }
        #div1{
            width: 200px;
            height: 200px;
        }

        #div2{
            width: 100px;
            height: 100px;
        }


        #div3{
            width: 100px;
            height: 100px;
        }

    </style>

</head>
<body>
<div id="div1">
    <div id="div2">div2</div>
    div1
</div>
<a href="javascript:void(0);" id="del">删除子节点</a>
<a href="javascript:void(0);" id="add">添加子节点</a>
<!--<input type="button" id="del" value="删除子节点">-->
<script>
    //1.获取超链接
    var element_a = document.getElementById("del");
    //2.绑定单击事件
    element_a.onclick = function(){
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }

    //1.获取超链接
    var element_add = document.getElementById("add");
    //2.绑定单击事件
    element_add.onclick = function(){
        var div1 = document.getElementById("div1");
        //给div1添加子节点
        //创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");

        div1.appendChild(div3);
    }


    /*
        超链接功能:
            1.可以被点击:样式
            2.点击后跳转到href指定的url

        需求:保留1功能,去掉2功能
        实现:href="javascript:void(0);"
     */

    var div2 = document.getElementById("div2");
    var div1 = div2.parentNode;
    alert(div1);

</script>
</body>
</html>

案例4_动态表格_添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
       
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
       
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        
    </tr>


</table>


<script>
    /*
        分析:
            1.添加:
                1. 给添加按钮绑定单击事件
                2. 获取文本框的内容
                3. 创建td,设置td的文本为文本框的内容。
                4. 创建tr
                5. 将td添加到tr中
                6. 获取table,将tr添加到table中
            2.删除:
                1.确定点击的是哪一个超链接
                    <a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
                2.怎么删除?
                    removeChild():通过父节点删除子节点

     */
    //1.获取按钮
    document.getElementById("btn_add").onclick = function(){
        //2.获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //3.创建td,赋值td的标签体
        //id 的 td
        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        //name 的 td
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        //gender 的 td
        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        //a标签的td
        var td_a = document.createElement("td");
        var ele_a = document.createElement("a");
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this);");
        var text_a = document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);

        //4.创建tr
        var tr = document.createElement("tr");
        //5.添加td到tr中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        //6.获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
    }

   


</script>

</body>
</html>

 

标签:Node,appendChild,表格,DOM,tr,var,td,document,节点
From: https://www.cnblogs.com/x3449/p/16915734.html

相关文章

  • MDFEND: Multi-domain Fake News Detection
    MDFEND:Multi-domainFakeNewsDetectionMDFEND:多领域假新闻检测作者:南琼、曹娟  CIKM2021shortpaper论文地址:https://arxiv.org/pdf/2201.00987.pdf数据集和......
  • node 连接MySQL
    使用node创建一个服务端比java简单多,下面创建一个node服务端,连接MySQL并且将数据在浏览器显示出来一.node创建服务端案例varhttp=require("http");http.createSe......
  • DOM_概述与DOM_Document对象_创建DOM对象
    DOM_概述Documentobjectmodel:文档对象模型将标记语音文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行crud的动态操作 ......
  • nodejs02
    Express快速创建Web服务器express的基本使用先安装express包[email protected].导入expressconstexpress=require('express');2.创建web服务器cons......
  • Bootstrap-Table 表格插件
    Bootstrap-Table表格插件个人学习关注32018.10.2022:44:16字数2,382阅读97,623JS插件文档库邀你一起协同创作-简书Bootstrap-TableBootstraptable是一......
  • 安装指定node版本(适用windows)
    一开始在网上查了很多什么“n版本管理”还有“nvm”,感觉都不如直接覆盖来的痛快第一步:在官网找到自己想要的版本,网址:https://nodejs.org/dist/,下载.msi安装包我下载的......
  • node.js安装及环境配置超详细教程【Windows系统安装包方式】
    文章目录Step1:下载安装包Step2:安装程序Step3:查看Step4:环境配置最后补充:Step1:下载安装包https://nodejs.org/zh-cn/download/根据自己电脑系统及位数选择,我的电......
  • XML的方式DOM、SAX、DOM4J、JDOM、StAX之比较
    JAVA解析XML的方式DOM、SAX、DOM4J、JDOM、StAX之详解与比较1.各种方式的详解1)DOM(JAXPCrimson解析器)DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准。DOM是以层......
  • DOM 高阶教程
    注册事件/绑定事件传统注册方式:<buttononclick=""></button>btn.onclick=function(){}特点:注册事件的唯一性 方法监听注册方式:addEventLisener()特点:同......
  • 使用easy excel进行简单的导入导出表格
    1.创建项目,导入easyexcel的依赖<!--easyexcel依赖--><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3......