原生js学生信息添加删除(表格+表单)

最新推荐文章于 2023-06-18 00:05:43 发布

Diphda_

最新推荐文章于 2023-06-18 00:05:43 发布

阅读量1.8k

点赞数

分类专栏： js 文章标签： js dom bootstrap tablet

本文链接：https://blog.csdn.net/apple_53718857/article/details/114372534

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

样式：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生信息管理</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <form action="">
        <div class="form-group">
          <label for="name">姓名</label>
          <input type="text" id="name" class="form-control" />
        </div>
        <div class="form-group">
          <label for="age">年龄</label>
          <input type="text" id="age" class="form-control" />
        </div>
        <div class="form-group">
          <label for="select">科目</label>
          <input type="text" id="select" class="form-control" />
        </div>
        <button type="button" class="btn btn-primary">提交</button>
        <button type="button" class="btn btn-info">重置</button>
      </form>

      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th><input type="checkbox" />全选</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>科目</th>
          </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
          <tr>
            <td colspan="4">
              <button class="btn btn-danger">删除选中行</button>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </body>
  <script>
    let form = document.querySelector("form");
    let input = form.querySelectorAll("input");
    let btn = form.querySelectorAll("button");
    let table = document.querySelector("table");
    let allinp = table.tHead.querySelector("input");
    let stuinp = table.tBodies[0].getElementsByTagName("input");
    // 这个不能用queryselector，它是静态获取，后面所有新增的都拿不到
    let del = table.tFoot.querySelector("button");

    //提交事件
    btn[0].onclick = function () {
      let tr = document.createElement("tr");
      tr.innerHTML = `<tr>
            <td><input type="checkbox"></td>
            <td>${input[0].value}</td>
            <td>${input[1].value}</td>
            <td>${input[2].value}</td>
          </tr>`;
      table.tBodies[0].appendChild(tr);
      reset();

      //反选,必须要写在添加事件里面，写在外面的话页面执行时没有input，就没有点击事件的添加
      for (let i = 0; i < stuinp.length; i++) {
        stuinp[i].onclick = function () {
          let tag = true;
          for (let i = 0; i < stuinp.length; i++) {
            tag &= stuinp[i].checked;
          }
          allinp.checked = tag;
        };
      }
    };

    //重置方法
    function reset() {
      for (let i = 0; i < input.length; i++) {
        input[i].value = "";
      }
    }

    //重置事件
    btn[1].onclick = function () {
      reset();
    };

    //全选
    allinp.onclick = function () {
      for (let i = 0; i < stuinp.length; i++) {
        stuinp[i].checked = allinp.checked;
      }
    };

    //删除
    del.onclick = function () {
      for (let i = 0; i < stuinp.length; i++) {
        if (stuinp[i].checked) {
          stuinp[i].parentNode.parentNode.remove();
          i--;
        }
        //元素删除完了之后，下标会-1，所以要重新判断i是否选中，要么i--，要么重新获取stuinp类数组
      }
    };
  </script>
</html>

Diphda_

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
原生js学生信息添加删除(表格+表单)

样式：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>学生信息管理</title> <link rel="stylesheet"
复制链接

扫一扫