实现表格的动态变化，点击表格后边按钮，为表格增加一行。_html动态表格

作者：盐析白兔 | 2024-06-16 03:08:23

踩

html动态表格

html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>动态表格</title>
  </head>
  <body>
    <!-- 创建一个div块标签，在该块标签中添加三个输入信息（编号、姓名、性别）的框框、一个确认添加的按钮（添加）-->
    <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>
 
      <!-- 表格第二行：学生信息2 -->
      <tr>
        <td>1</td>
        <td>小明</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="#;" onclick="deleteTr(this);">删除</a></td>
      </tr>
 
      <!-- 表格第三行：学生信息2 -->
      <tr>
        <td>2</td>
        <td>小红</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="#;" onclick="deleteTr(this);">删除</a></td>
      </tr>
 
      <!-- 表格第四行：学生信息3 -->
      <tr>
        <td>3</td>
        <td>小兰</td>
        <td>女</td>
        <!-- 在该单元格中创建一个链接标签，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="#;" onclick="deleteTr(this);">删除</a></td>
      </tr>
    </table>

JavaScript


<script>
      // 使用innerHTML添加
      document.getElementById("btn_add").onclick = function () {
        // 获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
 
        // 获取table
        var table = document.getElementsByTagName("table")[0];
 
        // 追加一行
 
        table.innerHTML += ` <tr>
            <td>${id}</td>
            <td>${name}</td>
            <td>${gender}</td>
            <td><a href="#"; onclick="deleteTr(this);">删除</a></td>
            </tr>`;
      };
 
      // 删除方法
      function deleteTr(object) {
        // 获取table节点
        var table = object.parentNode.parentNode.parentNode;
        // 获取tr节点
        var tr = object.parentNode.parentNode;
        // 删除（并返回）当前节点的指定子节点。
        table.removeChild(tr);
      }
    </script>

css


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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/724887