js 表格的增删操作，全选，反选，全不选操作

最新推荐文章于 2023-07-18 11:18:07 发布

最新推荐文章于 2023-07-18 11:18:07 发布

阅读量782

点赞数

分类专栏： html css js jq 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/vue1024/article/details/122363747

版权

html css js jq 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

这是一个使用JavaScript实现的HTML表格增删改查功能的示例，包括全选、反选和全不选操作。通过点击按钮，用户可以新增表格行、删除选中行、切换行选中状态，以及对表格数据进行编辑。代码中包含了表格数据的初始化、渲染以及事件处理函数，展示了前端开发中常见的表格操作技巧。

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

js 表格的增删操作，全选，反选，全不选操作

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table,
    tr,
    td,
    th {
      border: 1px solid #000;
    }

    table {
      width: 500px;
      border-collapse: collapse;
      text-align: center;
    }

    #module {
      width: 100vw;
      height: 100vh;
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.492);
      display: none;
    }

    .user-add {
      width: 300px;
      margin: 200px auto;
    }

    .active {
      background: green;
    }
  </style>
</head>

<body>

  <table id="list">
    <tbody></tbody>
  </table>

  <p>
    <button onclick="addUserPage()">新增</button>
    <button onclick="delUserHandle()">删除</button>
    <button onclick="selectedHandle(2)">反选</button>
    <button onclick="selectedHandle(1)">全不选</button>
    <button onclick="selectedHandle(3)">全选</button>
  </p>


  <div id="module">
    <div class="user-add">
      信息1：<input type="text"><br><br>
      信息2：<input type="text"><br><br>
      信息3：<input type="text"><br><br>
      信息4：<input type="text"><br><br>
      <button onclick="addUserHandle()">新加</button>
    </div>
  </div>


  <script>

    // 初始化表格数据
    var userList = [
      {
        status: true,
        name: '小明',
        age: 12,
        sex: '男',
        address: '北京'
      },
      {
        status: false,
        name: '小花',
        age: 18,
        sex: '女',
        address: '北京'
      },
      {
        status: false,
        name: '小天',
        age: 14,
        sex: '男',
        address: '北京'
      }
    ]
    // 获取tbody元素对象
    var tbody = document.getElementsByTagName('tbody')[0]


    // 填充数据 
    fillData(userList)
    function fillData(data) {
      // 每次填充时，先把tbody中的数据清空
      tbody.innerHTML = ''

      // 循环data中的数据
      for (var i = 0; i < data.length; i++) {
        // 每进来就生成一个tr，然后添加tbody中

        tbody.innerHTML += `<tr class="${data[i].status ? 'active' : ''}" οnclick="statusChange(${i})">
          <td><input type="checkbox" ${data[i].status ? 'checked' : ''}></td>
          <td>${data[i].name}</td>
          <td>${data[i].age}</td>
          <td>${data[i].sex}</td>
          <td>${data[i].address}</td>
          <td><a href="javascript:void(0);" οnmοusedοwn="delHandle(${i})">删除</a></td>
        </tr>`
      }
    }

    // 显示添加数据的页面
    var module = document.getElementById('module')
    function addUserPage() {
      module.style.display = 'block'
    }

    // 添加数据
    var inputs = module.getElementsByTagName('input')
    function addUserHandle() {
      // 获取表单数据
      userList.push({
        status: false,
        name: inputs[0].value,
        age: inputs[1].value,
        sex: inputs[2].value,
        address: inputs[3].value
      })
      // 更新页面数据
      fillData(userList)
      // 关掉模态框
      module.style.display = 'none'
    }

    // 删除选中数据
    function delUserHandle() {
      // 拿出el.status === false的元素
      userList = userList.filter(function (el, index) { return el.status === false })
      // 重新渲染页面
      fillData(userList)
    }

    // 单行状态改变处理
    function statusChange(index) {
      // 对当前行的对象取反
      userList[index].status = !userList[index].status
      // 重新渲染页面数据
      fillData(userList)
    }

    // 状态改变处理
    function selectedHandle(type) {
      for (var i = 0; i < userList.length; i++) {
        userList[i].status = type === 1 ? false : type === 2 ? !userList[i].status : true
      }
      // 重新渲染页面数据
      fillData(userList)
    }

    // 删除单行数据
    function delHandle(i) {
      userList = userList.filter(function (el, index) { return index !== i })
      // 重新渲染页面数据
      fillData(userList)
    }

  </script>


</body>

</html>