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

最新推荐文章于 2024-05-18 13:50:21 发布

Je veux m'allonger.

最新推荐文章于 2024-05-18 13:50:21 发布

阅读量865

点赞数

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_74848107/article/details/129066242

版权

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>