js实现表格数据渲染，表格数据新增，修改，删除。

已于 2024-08-07 08:34:28 修改
阅读量227 收藏
点赞数 3
文章标签： 前端
于 2024-08-06 17:19:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37432625/article/details/140960924
版权

功能点：

1.点击【查询】根据给定条件进行查询。

2.新增数据（有未填项时提示）

3.根据js中初始设置的数据来渲染表格

4.点击【修改】表格中文本变成对应输入框。

【确认】：表格中输入框变为纯文本数据。（注：这里修改了原始数据）

【取消】：还原。

5.上下翻页：（默认设置一页展示5条），根据数据动态设置翻页功能

---------------------------------------------------------------------------------------------------------------------------------代码：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>捐赠管理</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }

    .header {
      background-color: #007bff;
      color: white;
      padding: 10px;
      text-align: center;
      font-size: 20px;
    }

    .container {
      width: 95%;
      max-width: 1000px;
      margin: 20px auto;
      padding: 20px;
      background-color: white;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .search-area {
      /* text-align: center; */
      margin-bottom: 20px;
    }

    .search-area button {
      padding: 8px 15px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-left: 10px;
    }

    .donation-list {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }

    .donation-list th,
    .donation-list td {
      text-align: left;
      padding: 10px;
      border: 1px solid #ddd;
    }


    .donation-list th {
      background-color: #e9e9e9;
    }
    
    .donation-list td {
      width: 80px;
    }

    button {
      padding: 5px 10px;
      margin: 0 5px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    button.disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }

    .operation-buttons {
      text-align: center;
    }

    .operation-buttons button {
      padding: 5px 10px;
      margin-right: 5px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
    }
    form{
      margin-bottom: 10px;
    }
    input:invalid {
      border: 2px solid red;
    }
    input:valid {
      border: 2px solid green;
    }
    table input{
      width: 100%;
    }
  </style>
</head>

<body>

  <div class="header">
    捐赠管理
  </div>

  <div class="container">
    <div class="search-area">
      <label for="selectUnit">受捐单位</label>
      
      <select class="selectUnit" id="selectCondition">
      </select>
      <button type="button" id="selectBtn">查询</button>
      <button class="disabled" id="previous">上一页</button>
      <button id="nextPage">下一页</button>
    </div>
    <form>
      <label for="donor">捐赠人：</label>
      <input type="text" id="donor" placeholder="请输入捐赠人姓名" required>
      <label for="donationUnit">受捐单位：</label>
      <select class="selectUnit" id="donationUnit" required>
      </select>
      <label for="amount">金额：</label>
      <input type="number" id="amount" placeholder="请输入捐赠金额" required>
      <label for="donationDate">受捐日期：</label>
      <input type="date" id="donationDate" required>
      <button type="submit">提交</button>
    </form>
    <table class="donation-list">
      <tr>
        <th>序号</th>
        <th>捐赠人</th>
        <th>受捐单位</th>
        <th>金额</th>
        <th>受捐日期</th>
        <th>操作</th>
      </tr>
    </table>
  </div>

  <script>
    
    // 上下页思路
    // 根据条件得到符合条件的数据  这个时候也要修改maxPage的值
    // 根据page来通过符合条件的数据拿到上下页

    window.onload = function(){
      // 表格数据
      // 设置一页展示totalNum项
      const totalNum = 5;
      const unitOptions = ["中国扶贫基金会","中国慈善总会","壹基金"];
      // 得到所有下拉框
      let selectUnits = document.querySelectorAll(".selectUnit");
      // 查询按钮
      let selectBtn = document.querySelector("#selectBtn");
      // 新增表单
      let form = document.querySelector("form");
      // 上一页
      let previous = document.querySelector("#previous");
      // 下一页
      let nextPage = document.querySelector("#nextPage");
      // 现在的页数
      let page = 1;
      let allData = [
        {
          num:1,name:"子鼠",unit:"壹基金", amount:2000,date:"2013-05-05",isedit:false
        },{
          num: 2, name: "丑牛", unit: "中国扶贫基金会", amount: 3000, date: "2013-05-05", isedit: false
        }, {
          num: 3, name: "巳蛇", unit: "中国慈善总会", amount: 4000, date: "2013-06-07", isedit: false
        }, {
          num: 4, name: "寅虎", unit: "壹基金", amount: 1000, date: "2013-09-08", isedit: false
        }, {
          num: 5, name: "卯兔", unit: "壹基金", amount: 500, date: "2013-01-02", isedit: false
        }, {
          num: 6, name: "午马", unit: "中国慈善总会", amount: 1500, date: "2013-01-02", isedit: false
        }
      ];
      let maxPage = page;
      let table = document.querySelector("table");
      // 查询条件框
      let selectCondition = document.querySelector("#selectCondition");

      init();
      // 初始化操作
      function init(){
        // 初始化select数据
        for (let i = 0; i < selectUnits.length; i++) {
          selectUnits[i].innerHTML = `<option>请选择-</option>${getUnitOptions(unitOptions)}`;
        }
        // 初始化数据
        // 默认page是1
        page = 1;
        // 默认是无条件得到最大的页数，比如共21条数据，一页展示5条，最大的页数就是5
        maxPage = Math.ceil(allData.length / totalNum);
        showData(getData(selectCondition.value, page - 1));
        // 初始化按钮效果
        changePageBtn();
        
      }
      // 绑定上下页事件
      previous.addEventListener("click",function(){
        if(page > 1){
          // 允许点击
          page -= 1;
          // 重新渲染表格
          let data = getData(selectCondition.value,  page - 1);
          showData(data);
          // 修改page状态
          changePageBtn();
        }
        
      })
      nextPage.addEventListener("click", function () {
        if (page <= maxPage) {
          page += 1;
          let data = getData(selectCondition.value, page - 1);
          showData(data);
          // 修改page状态
          changePageBtn();
        }
        
      })
      // 修改上下页按钮状态
      function changePageBtn(){
        if (page === 1){
          // 现在是第一页
          previous.className = "disabled";
          if (page === maxPage){
            nextPage.className = "disabled";
          }else{
            nextPage.className = "";
          }
          
        }else if(page === maxPage){
          // 最大页
          nextPage.className = "disabled";
          previous.className = "";
        }else{
          previous.className = "";
          nextPage.className = "";
        }
      }
      

      // 新增数据 按钮绑定事件
      form[4].addEventListener("click", function (e) {
        // 阻止默认提交行为
        e.preventDefault();
        if (form[0].value && form[1].value && form[2].value && form[3].value) {
          // 非空
          allData.push({
            num: allData[allData.length - 1].num + 1, name: form[0].value, unit: form[1].value, amount: form[2].value, date: form[3].value, isedit: false
          });
          let selectCondition = document.querySelector("#selectCondition");
          // 默认展示第一页
          page = 1;
          let data = getData(selectCondition.value, 0);
          showData(data);
          // 清空输入
          form.reset();
        } else {
          alert("有未填项");
        }
      })
      
      
      
      // 展示对应的数据 需要有数据
      function showData(data){
        // 初始化，设置为空
        table.innerHTML = "";
        for (let i = 0; i < data.length; i++) {
          let item = data[i];
          let tr = document.createElement("tr");
          tr.innerHTML = renderTd(item);
          table.append(tr);
          tr.addEventListener("click",function(e){
            let target = e.target;
            // 是修改
            if (target.tagName.toUpperCase() === "BUTTON" && target.className === "edit"){
              toggle(tr,0, item);
            }else if(target.tagName.toUpperCase() === "BUTTON" && target.className === "del"){
              // 是删除
              if(confirm("确认删除？")){
                tr.remove();
                // 删除也要把源数据对应的那一段删除
                allData.splice(getIndexFromAllData(item), 1);
              }else{
              }
            } else if (target.tagName.toUpperCase() === "BUTTON" && target.className === "confirm") {
              // 是确定
              toggle(tr, 1, item);
            } else if (target.tagName.toUpperCase() === "BUTTON" && target.className === "cancel") {
              // 是取消
              toggle(tr, 2, item);
            }
          })
        }
        // 绑定事件

        
      }
      
      // 根据条件得到数据
      function getData(value,page){
        let data = [];
        // 条件数据，默认是无条件的所有数据
        let conditionData = allData;
        if(value !== "请选择-"){
          // 现在是有条件的
          conditionData = [];
          for (let i = 0; i < allData.length; i++) {
            if (allData[i].unit === value) {
              // 满足条件
              conditionData.push(allData[i]);
            }
          }
          
        }
        for (let i = 0 + page * totalNum, count = 0; i < conditionData.length && count < totalNum; i++) {
          data.push(conditionData[i]);
          count++;
        }
        maxPage = Math.ceil(conditionData.length / totalNum);
        changePageBtn();
        return data;
      }

      // 查询监听事件
      selectBtn.addEventListener("click",function(e){
        // 根据要求展示数据
        
        // 默认展示第一页
        page = 1;
        let data = getData(selectCondition.value, 0);
        showData(data);
      })
      // 设置input框状态切换
      function toggle(tr,num,data){
        let editBtn = tr.querySelector(".edit");
        let delBtn = tr.querySelector(".del");
        let confirmBtn = tr.querySelector(".confirm");
        let cancelBtn = tr.querySelector(".cancel");
        // 当num是0，代表现在是 可写 状态
        let tdArr = tr.querySelectorAll("td");
        if (num === 0){
          // 切换按钮
          editBtn.style.display = "none";
          delBtn.style.display = "none";
          confirmBtn.style.display = "inline-block";
          cancelBtn.style.display = "inline-block";
          // 设置为input框
          for(let i = 1;i < tdArr.length - 1; i++){
            let item = tdArr[i];
            if (tdArr[i].className === "unit"){
              // 是单位，下拉框
              tdArr[i].innerHTML = `<select name="" id="">
                <option>请选择-</option>${getUnitOptions(unitOptions, tdArr[i].textContent) }</select>`;
            }else if (tdArr[i].className === "date"){
              // 是日期
              tdArr[i].innerHTML = `<input type="date" value="${tdArr[i].textContent}">`;
            }else{
              tdArr[i].innerHTML = `<input type="text" value="${tdArr[i].textContent}">`;
            }

          }
        }else if(num === 1) {
          // 当num === 1，代表现在是 只读 状态
          editBtn.style.display = "inline-block";
          delBtn.style.display = "inline-block";
          confirmBtn.style.display = "none";
          cancelBtn.style.display = "none";
          // 得到源数据
          let index = getIndexFromAllData(data);
          // 设置为纯文本
          for (let i = 1; i < tdArr.length - 1; i++) {
            let item = tdArr[i].children[0];
            tdArr[i].innerHTML = item.value;
            // 没写完  把对应的原始数据里面的数据修改一下  AllData
            allData[index][tdArr[i].className] = item.value;
          }
        }else if (num === 2){
          editBtn.style.display = "inline-block";
          delBtn.style.display = "inline-block";
          confirmBtn.style.display = "none";
          cancelBtn.style.display = "none";
          // 设置为最开始的数据
          tr.innerHTML = renderTd(data);
          
        }else{

        }
        
      }
    
      // 得到目前的单位下拉框
      function getUnitOptions(data,selectedStr){
        let str = "";
        for(let i = 0;i < data.length;i++){
          if (data[i] === selectedStr){
            str += `<option selected>${data[i]}</option>`;
          }else{
            str += `<option>${data[i]}</option>`;
          }
        }
        return str;
      }
    
      // 给定数据渲染td
      function renderTd(item){
        return `
            <td class="num">${item.num}</td>
            <td class="name">${item.name}</td>
            <td class="unit">${item.unit}</td>
            <td class="amount">${item.amount}</td>
            <td class="date">${item.date}</td>
            <td class="operation-buttons">
              <button class="edit">修改</button>
              <button class="del">删除</button>
              <button class="confirm" style="display:none">确认</button>
              <button class="cancel" style="display:none">取消</button>
            </td>`;
      }
      
      // 从源数据中找到想要的数据索引
      function getIndexFromAllData(data){
        let index = 0;
        for (; index < allData.length; index++) {
          if (allData[index].num === data.num) {
            // 找到源数据那一个对象
            break;
          }
        }
        return index;
      }
      
    
    }
    
  </script>
</body>

</html>

牛牛的天线
关注
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
在Vue和Element UI框架下，实现表格的编辑、删除和新增行是常见的需求。这篇文章将介绍一种优化后的最佳实践，旨在提高代码效率和用户体验。在传统的实现方式中，可能需要通过双击单元格来激活编辑模式，而这里我们...
JavaScript+表格渲染
Z_100508051823的博客
03-13 260
JavaScript+表格渲染 动态渲染表格 : JavaScript根据一个数据(数组 / 对象), 把页面中的 html 结构渲染完成 ( 渲染页面就是通过数据把页面渲染出来, 页面中的大部分内容都是靠渲染上去的, 而不是真实写死在页面上的 ) 分析数据:
JS动态渲染表格
Mr.小灰狼_随笔
07-03 7940
动态渲染表格 0.0 意义: 根据一个数据(数组 / 对象), 把页面的 html 结构渲染完成 ( 渲染页面就是通过数据把页面渲染出来, 页面中的大部分内容都是靠渲染上去的, 而不是真实写死在页面上的 ) 分析数据: + 最外层是一个 数组 => 数组 表示了表格内的所有数据 1: 一个表格有多少个 tr 标签 => 由 数组内 有多少个 对象 { } 来决定 => 一个 对象 对应一个 tr 标签 2: 一个 tr 内有多少个 td 标签 => 由 对象内 有多少个
js渲染表格（源代码）
小罗的博客
12-20 2511
动态渲染页面：在我们的代码里面有已知的数据结构，我们通过代码的方式把这个数据渲染成一个页面再显示在表格上（当然不一定要渲染表格，也可以根据需求渲染成各种各样的结构） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
Dynamics CRM 9.0 及以上版本中js操作
最新发布
hy_4377的博客
07-26 246
在 Dynamics CRM 9.0 以下版本中使用 Xrm.Page，而在 9.0 及以上版本中则需要使用 formContext 数据上下文对象。
案列第一次js和html和css一起做题
m0_67545415的博客
10-20 92
1
Vue.js条件渲染与列表渲染指南
05-26 436
Vuex是Vue.js的官方状态管理库，可以用于管理组件之间的共享状态。可以使用Vuex来实现单向数据流，可以避免组件之间的耦合，提高组件的可重用性。可以使用vuex包来安装Vuex，可以在store.js中进行状态管理的配置，可以使用mapState和等辅助函数来在组件中使用状态和操作。在上面的示例代码中，使用vuex包来安装Vuex，并在store.js中进行状态管理的配置。使用mapState和等辅助函数来在组件中使用状态和操作。
js表格操作，DOM实现数据动态增删查改
12-02
本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能，这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构，包括`<thead>`定义表头，`...
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
10-18
在本文中，我们将探讨如何利用Bootstrap和Vue.js这两个强大的技术栈来实现一个具有动态展示、新增和删除功能的表格。Bootstrap作为流行的前端框架，提供了丰富的UI组件，而Vue.js则是一个轻量级的渐进式JavaScript...
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
12-11
它还支持通过Ajax获取数据并动态渲染表格。 接下来，我们详细分析实现异步刷新表格的代码： 1. **异步请求**：在代码中，我们使用`$.ajax`方法发送一个POST请求到服务器。`postData`对象包含了要发送的数据，例如...
三种js 动态生成表格的方法
09-27
这是一个简单的js动态生成表格。。里面有三种生成表格的方法‘’‘’‘’‘’‘
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
10-18
可以采用原生JavaScript来操作数组和对象，结合Layui的数据表格渲染机制，通过编程方式直接在数据源中添加新行，并触发表格的重载机制。 #### Layui数据表格数据源处理 Layui的数据表格在渲染时依赖于后端返回的...
Vue中data数据变化 -- 页面重新渲染的问题
m0_58355198的博客
08-21 7803
话不多说，直接上代码！！！ 1. 当数据属于基本类型时 ， vue会自动检测并在页面重新渲染 <div id="app"> <p>{{ testData }} </p> </div> <script src="./vue-2.6.12.js"></script> <script> let vm = new Vue({ el:'#app', data(){ return {
JavaScript数组操作详解：两种常见的添加数据方法
qq_22841387的博客
10-05 2314
在这篇文章中，我们对比了两种常见的数组数据添加方法：直接通过方括号赋值[ ]和使用push()方法。通过了解它们的优缺点及适用场景，开发者可以根据实际需求选择最适合的操作方式。如果数据较为固定且少量，直接赋值[ ]是更简洁的选择。如果数据是动态的、需要频繁操作，push()方法的灵活性将提供更大的便利。理解这些基础操作，可以为日后的项目开发提供更多的选择，提升代码的可读性和效率。
原生js 实现 增删改查
lzfengquan的博客
07-09 2572
自己创建一个表格 <!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="stylesh
如何利用js实现删除表格每行的功能？
csgojingyu的博客
09-21 1144
一定要包含在<table></table>之间，否则会打印多个表头！
JavaScript 05
weixin_62443949的博客
03-21 539
JS
Lesson 13 渲染列表数据
Mr_zzr的博客
07-14 431
Lesson 13 渲染列表数据
Bootstrap中利用dataTable实现表格行数据直录
接下来，通过JavaScript和jQuery DataTables插件，我们可以动态地往表格tbody部分添加新的行数据，同时处理新增、编辑和删除操作。例如，我们可以使用`row.add()`方法添加新行，`row.update()`更新现有行，`row....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值