JavaScript DOM动态表格综合练习

最新推荐文章于 2022-09-13 10:04:59 发布

lao_kai_ybqy

最新推荐文章于 2022-09-13 10:04:59 发布

阅读量398

点赞数 3

分类专栏：网页设计 java 文章标签： java html css javascript

本文链接：https://blog.csdn.net/weixin_47701814/article/details/117166600

版权

java 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

网页设计

11 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用DOM（文档对象模型）来实现动态表格的创建和编辑。通过JavaScript，作者展示了如何创建和修改元素节点、文本节点以及属性，并通过`getElementById`、`getElementsByTagName`等方法操作DOM。此外，还展示了动态添加和删除表格行的实例，以及事件监听功能。此案例旨在帮助读者熟悉DOM的基本操作。

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

学习完DOM来个小练习

其中包括了很多知识点
首先是一些对象方法

getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

对象属性值

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

动态表格案例

先贴代码,之后看注释就可以大概了解了

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>DOM案例</title>
    <style>   /*利用元素选择器来统一格式*/
      table{
        align-content: center;
        margin: auto;   /*让表格居中*/
      }
      th{
        width: 200px;
      }
      div{
        text-align: center;
        margin: 50px;
      }
    </style>
</head>
<body>

<p style="font-size: x-large; text-align: center"> <span style="color: chartreuse">用户编辑系统</span></p>

<div>
  <input type="text" id="id" placeholder="请输入标号">
  <input type="text" id="name" placeholder="请输入姓名">
  <input type="text" id="gender" placeholder="请输入性别">
  <input type="button" id="add" value="添加">
</div>
<div>
<table border="2px">
  <caption>学生信息表</caption>
  <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>操作</th>
  </tr>

  <tr>
    <td>1</td>
    <td>张三</td>
    <td>男</td>
    <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
    <!--href的属性值设置为 javascript:void(0); 表示没有返回跳转的页面,但可以进行点击,也可以用按钮键代替-->
    <!--this表示当前超链接的位置-->
  </tr>
</table>
</div>
<script>
    document.getElementById("add").onclick =function () {
    var id = document.getElementById("id").value;
    //.value是获取id的字符串形式
    var name = document.getElementById("name").value;
    var gender = document.getElementById("gender").value;
    //建立td标签
    var td_id=document.createElement("td"); //创建td标签元素
    var text_id = document.createTextNode(id);  //创建文本结点,将用户输入的字符串接受
    //创建一个
    td_id.appendChild(text_id); //将文本节点加入td中
    var td_name=document.createElement("td");
    var text_name = document.createTextNode(name);
    td_name.appendChild(text_name);
    var td_gender=document.createElement("td");
    var text_gender = document.createTextNode(gender);
    td_gender.appendChild(text_gender);
    var td_a = document.createElement("td");
    var ele_a = document.createElement("a");  //创建<a>标签
    ele_a.setAttribute("href","javascript:void(0);"); //设置<a>标签的属性
    ele_a.setAttribute("onclick","delTr(this)")       //设置<a>标签的属性
    var text_a = document.createTextNode("删除");
    ele_a.appendChild(text_a);
    td_a.appendChild(ele_a);
    //建立tr标签
    var tr = document.createElement("tr");
    //将所有td标签加入tr中
    tr.appendChild(td_id);
    tr.appendChild(td_name);
    tr.appendChild(td_gender);
    tr.appendChild(td_a);
    //通过标签名来获取,该方法获取的是一个数组记得要加[0]
    var table = document.getElementsByTagName("table")[0];
    table.appendChild(tr);
  }
  function delTr(obj){
      
      var table = obj.parentNode.parentNode.parentNode;
      //找到链接标签的父节点:td ,再找td标签的父节点:tr,再找tr标签的父节点table标签,最后就找到了table
      var tr    = obj.parentNode.parentNode;
      //找到链接标签的父节点:td ,再找td标签的父节点:tr,最后就找到了tr标签
      table.removeChild(tr);
      //将table中的tr删除
  }
</script>
</body>
</html>