devbox
天景科技苑
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

js实现动态添加删除表格数据的两种方式_js动态添加表格内容

作者：天景科技苑 | 2024-07-27 04:45:57

赞

踩

js动态添加表格内容

目录

1、通过创建节点实现

css代码

html代码

js代码

完整代码

2、通过渲染表格，事件委托实现

css代码

html代码

js代码

完整代码

效果图

1、通过创建节点实现

思路：先把整体的html结构写出来，table表格分为3部分，其中tbody中的内容通过节点创建出来，删除时，找到其祖先元素的节点进行remove（），表单内的各个框的值对应表格的内容。

css代码

  1. <style>
  2.         .wrapper {
  3.             display: flex;
  4.             margin-left: 100px;
  5.             margin-top: 100px;
  6.         }
  7.  
  8.         .box {
  9.             width: 300px;
  10.             height: 400px;
  11.             /* border: 2px solid red; */
  12.             margin-left: 50px;
  13.         }
  14.  
  15.         input {
  16.             height: 40px;
  17.             width: 200px;
  18.             margin-bottom: 30px;
  19.         }
  20.  
  21.         button {
  22.             background-color: #23669a;
  23.             color: white;
  24.             width: 50px;
  25.             height: 30px;
  26.             border-radius: 5px;
  27.             outline: none;
  28.             border: none;
  29.             margin-left: 50px;
  30.         }
  31.  
  32.  
  33.         table {
  34.             border: 1px solid #dbdbdb;
  35.             border-collapse: collapse;
  36.         }
  37.  
  38.         table tr,
  39.         th,
  40.         td {
  41.             height: 50px;
  42.             width: 180px;
  43.             border: 1px solid #dbdbdb;
  44.             text-align: center;
  45.         }
  46.  
  47.         thead tr {
  48.             background-color: #f4f4f5;
  49.         }
  50.  
  51.         tbody tr td:nth-child(3) {
  52.             color: #f54d7b;
  53.         }
  54.     </style>

html代码

  1. <div class="wrapper">
  2.         <div>
  3.             <table>
  4.                 <thead>
  5.                     <th>姓名</th>
  6.                     <th>科目</th>
  7.                     <th>成绩</th>
  8.                     <th>操作</th>
  9.                 </thead>
  10.                 <tbody>
  11.  
  12.                 </tbody>
  13.                 <tfoot>
  14.                     <tr>
  15.                         <td colspan="4"> 总分：<span class="total"></span>平均分: <span class="avg"></span></td>
  16.                     </tr>
  17.                 </tfoot>
  18.             </table>
  19.         </div>
  20.  
  21.  
  22.         <div class="box">
  23.             姓名：<input type="text" placeholder="请输入姓名" class="name"><br>
  24.             科目：<input type="text" placeholder="请输入科目" class="sub"><br>
  25.             分数：<input type="text" placeholder="请输入分数" class="score"><br>
  26.             <button>添加</button>
  27.         </div>
  28.  
  29.     </div>

js代码

  1.  <script>
  2.         //获取元素
  3.         const tbody = document.querySelector('tbody')
  4.         const btn = document.querySelector('button')
  5.         const name = document.querySelector('.name')
  6.         const sub = document.querySelector('.sub')
  7.         const score = document.querySelector('.score')
  8.         let total = document.querySelector('.total')
  9.         let avg = document.querySelector('.avg')
  10.         //给按钮添加点击事件
  11.         btn.addEventListener('click', function () {
  12.             //创建元素
  13.             const tr = document.createElement('tr')
  14.             const td1 = document.createElement('td')
  15.             const td2 = document.createElement('td')
  16.             const td3 = document.createElement('td')
  17.             const td4 = document.createElement('td')
  18.             if(name.value===''||sub.value===''||score.value===''){
  19.                 alert('姓名，科目，成绩不能为空')
  20.             }else{
  21.                 td1.innerHTML = name.value
  22.             td2.innerHTML = sub.value
  23.             td3.innerHTML = score.value
  24.             td4.innerHTML = '<a href="javascript:;">删除</a>'
  25.             tr.appendChild(td1)
  26.             tr.appendChild(td2)
  27.             tr.appendChild(td3)
  28.             tr.appendChild(td4)
  29.             tbody.appendChild(tr)
  30.             name.value = ''
  31.             sub.value = ''
  32.             score.value = ''
  33.             }
  34.           
  35.             let three1 = document.querySelectorAll('tbody tr td:nth-child(3)')
  36.             let sum = 0
  37.             for (let j = 0; j < three1.length; j++) {
  38.                 sum += (three1[j].innerHTML - 0)
  39.  
  40.             }
  41.             //总分
  42.             total.innerHTML = `${sum}`
  43.             //平均值
  44.             avg.innerHTML = `${sum / three1.length}`
  45.             //给创建的a添加删除的点击事件
  46.             let as = document.querySelectorAll('a')
  47.             for (let i = 0; i < as.length; i++) {
  48.                 as[i].addEventListener('click', function () {
  49.                     //    tbody.removeChild(this.parentNode.parentNode)
  50.                     sum -= (three1[i].innerHTML - 0)
  51.                     this.parentNode.parentNode.remove()
  52.                     total.innerHTML = `${sum}`
  53.  
  54.                     // total.innerHTML = `${sum - (three1[i].innerHTML - 0)}`
  55.                     let three = document.querySelectorAll('tbody tr td:nth-child(3)')
  56.  
  57.  
  58.                     avg.innerHTML = `${(sum / three.length).toFixed(2) === 'NaN' ? 0 : (sum / three.length).toFixed(2)}`
  59.  
  60.  
  61.                 })
  62.  
  63.             }
  64.  
  65.  
  66.         })
  67.  
  68.  
  69.     </script>

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .wrapper {
  10.             display: flex;
  11.             margin-left: 100px;
  12.             margin-top: 100px;
  13.         }
  14.  
  15.         .box {
  16.             width: 300px;
  17.             height: 400px;
  18.             /* border: 2px solid red; */
  19.             margin-left: 50px;
  20.         }
  21.  
  22.         input {
  23.             height: 40px;
  24.             width: 200px;
  25.             margin-bottom: 30px;
  26.         }
  27.  
  28.         button {
  29.             background-color: #23669a;
  30.             color: white;
  31.             width: 50px;
  32.             height: 30px;
  33.             border-radius: 5px;
  34.             outline: none;
  35.             border: none;
  36.             margin-left: 50px;
  37.         }
  38.  
  39.  
  40.         table {
  41.             border: 1px solid #dbdbdb;
  42.             border-collapse: collapse;
  43.         }
  44.  
  45.         table tr,
  46.         th,
  47.         td {
  48.             height: 50px;
  49.             width: 180px;
  50.             border: 1px solid #dbdbdb;
  51.             text-align: center;
  52.         }
  53.  
  54.         thead tr {
  55.             background-color: #f4f4f5;
  56.         }
  57.  
  58.         tbody tr td:nth-child(3) {
  59.             color: #f54d7b;
  60.         }
  61.     </style>
  62. </head>
  63.  
  64. <body>
  65.     <div class="wrapper">
  66.         <div>
  67.             <table>
  68.                 <thead>
  69.                     <th>姓名</th>
  70.                     <th>科目</th>
  71.                     <th>成绩</th>
  72.                     <th>操作</th>
  73.                 </thead>
  74.                 <tbody>
  75.  
  76.                 </tbody>
  77.                 <tfoot>
  78.                     <tr>
  79.                         <td colspan="4"> 总分：<span class="total"></span>平均分: <span class="avg"></span></td>
  80.                     </tr>
  81.                 </tfoot>
  82.             </table>
  83.         </div>
  84.  
  85.  
  86.         <div class="box">
  87.             姓名：<input type="text" placeholder="请输入姓名" class="name"><br>
  88.             科目：<input type="text" placeholder="请输入科目" class="sub"><br>
  89.             分数：<input type="text" placeholder="请输入分数" class="score"><br>
  90.             <button>添加</button>
  91.         </div>
  92.  
  93.     </div>
  94.  
  95.     <script>
  96.         //获取元素
  97.         const tbody = document.querySelector('tbody')
  98.         const btn = document.querySelector('button')
  99.         const name = document.querySelector('.name')
  100.         const sub = document.querySelector('.sub')
  101.         const score = document.querySelector('.score')
  102.         let total = document.querySelector('.total')
  103.         let avg = document.querySelector('.avg')
  104.         //给按钮添加点击事件
  105.         btn.addEventListener('click', function () {
  106.             //创建元素
  107.             const tr = document.createElement('tr')
  108.             const td1 = document.createElement('td')
  109.             const td2 = document.createElement('td')
  110.             const td3 = document.createElement('td')
  111.             const td4 = document.createElement('td')
  112.             if(name.value===''||sub.value===''||score.value===''){
  113.                 alert('姓名，科目，成绩不能为空')
  114.             }else{
  115.                 td1.innerHTML = name.value
  116.             td2.innerHTML = sub.value
  117.             td3.innerHTML = score.value
  118.             td4.innerHTML = '<a href="javascript:;">删除</a>'
  119.             tr.appendChild(td1)
  120.             tr.appendChild(td2)
  121.             tr.appendChild(td3)
  122.             tr.appendChild(td4)
  123.             tbody.appendChild(tr)
  124.             name.value = ''
  125.             sub.value = ''
  126.             score.value = ''
  127.             }
  128.           
  129.             let three1 = document.querySelectorAll('tbody tr td:nth-child(3)')
  130.             let sum = 0
  131.             for (let j = 0; j < three1.length; j++) {
  132.                 sum += (three1[j].innerHTML - 0)
  133.  
  134.             }
  135.             //总分
  136.             total.innerHTML = `${sum}`
  137.             //平均值
  138.             avg.innerHTML = `${sum / three1.length}`
  139.             //给创建的a添加删除的点击事件
  140.             let as = document.querySelectorAll('a')
  141.             for (let i = 0; i < as.length; i++) {
  142.                 as[i].addEventListener('click', function () {
  143.                     //    tbody.removeChild(this.parentNode.parentNode)
  144.                     sum -= (three1[i].innerHTML - 0)
  145.                     this.parentNode.parentNode.remove()
  146.                     total.innerHTML = `${sum}`
  147.  
  148.                     // total.innerHTML = `${sum - (three1[i].innerHTML - 0)}`
  149.                     let three = document.querySelectorAll('tbody tr td:nth-child(3)')
  150.  
  151.  
  152.                     avg.innerHTML = `${(sum / three.length).toFixed(2) === 'NaN' ? 0 : (sum / three.length).toFixed(2)}`
  153.  
  154.  
  155.                 })
  156.  
  157.             }
  158.  
  159.  
  160.         })
  161.  
  162.  
  163.     </script>
  164.  
  165. </body>
  166.  
  167. </html>

2、通过渲染表格，事件委托实现

思路：先把整体的效果图写出来，再通过js渲染到页面上，每次添加一组数据就相当于给数组添加数据，删除事件用事件委托，给祖先元素绑定事件，子元素触发事件会冒泡到祖先元素。

css代码

  1. .score-case {
  2.   width: 1000px;
  3.   margin: 50px auto;
  4.   display: flex;
  5. }
  6. .score-case .table {
  7.   flex: 4;
  8. }
  9. .score-case .table table {
  10.   width: 100%;
  11.   border-spacing: 0;
  12.   border-top: 1px solid #ccc;
  13.   border-left: 1px solid #ccc;
  14. }
  15. .score-case .table table th {
  16.   background: #f5f5f5;
  17. }
  18. .score-case .table table tr:hover td {
  19.   background: #f5f5f5;
  20. }
  21. .score-case .table table td,
  22. .score-case .table table th {
  23.   border-bottom: 1px solid #ccc;
  24.   border-right: 1px solid #ccc;
  25.   text-align: center;
  26.   padding: 10px;
  27. }
  28. .score-case .table table td.red,
  29. .score-case .table table th.red {
  30.   color: red;
  31. }
  32. .score-case .table .none {
  33.   height: 100px;
  34.   line-height: 100px;
  35.   color: #999;
  36. }
  37. .score-case .form {
  38.   flex: 1;
  39.   padding: 20px;
  40. }
  41. .score-case .form .form-item {
  42.   display: flex;
  43.   margin-bottom: 20px;
  44.   align-items: center;
  45. }
  46. .score-case .form .form-item .label {
  47.   width: 60px;
  48.   text-align: right;
  49.   font-size: 14px;
  50. }
  51. .score-case .form .form-item .input {
  52.   flex: 1;
  53. }
  54. .score-case .form .form-item input,
  55. .score-case .form .form-item select {
  56.   appearance: none;
  57.   outline: none;
  58.   border: 1px solid #ccc;
  59.   width: 200px;
  60.   height: 40px;
  61.   box-sizing: border-box;
  62.   padding: 10px;
  63.   color: #666;
  64. }
  65. .score-case .form .form-item input::placeholder {
  66.   color: #666;
  67. }
  68. .score-case .form .form-item .cancel,
  69. .score-case .form .form-item .submit {
  70.   appearance: none;
  71.   outline: none;
  72.   border: 1px solid #ccc;
  73.   border-radius: 4px;
  74.   padding: 4px 10px;
  75.   margin-right: 10px;
  76.   font-size: 12px;
  77.   background: #ccc;
  78. }
  79. .score-case .form .form-item .submit {
  80.   border-color: #069;
  81.   background: #069;
  82.   color: #fff;
  83. }

html代码

  1. <div id="app" class="score-case">
  2.       <div class="table">
  3.         <table>
  4.           <thead>
  5.             <tr>
  6.               <th>姓名</th>
  7.               <th>科目</th>
  8.               <th>成绩</th>
  9.               <th>操作</th>
  10.             </tr>
  11.           </thead>
  12.           <tbody>
  13.             <!-- <tr>
  14.               <td>1</td>
  15.               <td>语文</td>
  16.               <td class="red">46</td>
  17.               <td><a href="#">删除</a></td>
  18.             </tr> -->
  19.           </tbody>
  20.  
  21.           <tfoot>
  22.             <tr>
  23.               <td colspan="5">
  24.                 <span class="total">总分：246</span>
  25.                 <span style="margin-left: 50px" class="average"
  26.                   >平均分：79</span
  27.                 >
  28.               </td>
  29.             </tr>
  30.           </tfoot>
  31.         </table>
  32.       </div>
  33.       <div class="form">
  34.         <div class="form-item">
  35.           <div class="label">姓名：</div>
  36.           <div class="input">
  37.             <input type="text" placeholder="请输入姓名" class="username" />
  38.           </div>
  39.         </div>
  40.         <div class="form-item">
  41.           <div class="label">科目：</div>
  42.           <div class="input">
  43.             <input type="text" placeholder="请输入科目" class="subject" />
  44.           </div>
  45.         </div>
  46.         <div class="form-item">
  47.           <div class="label">分数：</div>
  48.           <div class="input">
  49.             <input type="text" placeholder="请输入分数" class="score" />
  50.           </div>
  51.         </div>
  52.         <div class="form-item">
  53.           <div class="label"></div>
  54.           <div class="input">
  55.             <button class="submit">添加</button>
  56.           </div>
  57.         </div>
  58.       </div>
  59.     </div>

js代码

  1. <script>
  2.       const list = [
  3.         {
  4.           uname: '张三',
  5.           subject: '语文',
  6.           score: 20,
  7.         },
  8.         {
  9.           uname: '李四',
  10.           subject: '数学',
  11.           score: 20,
  12.         },
  13.         {
  14.           uname: '王五',
  15.           subject: '英文',
  16.           score: 20,
  17.         },
  18.       ]
  19.       // 1 基于数据渲染页面
  20.       function render() {
  21.         let str = ''
  22.         let sum = 0
  23.         for (let i = 0; i < list.length; i++) {
  24.           sum += list[i].score
  25.           str += `
  26.              <tr>
  27.               <td>${list[i].uname}</td>
  28.               <td>${list[i].subject}</td>
  29.               <td class="red">${list[i].score}</td>
  30.               <td><a href="#" data-id=${i}>删除</a></td>
  31.             </tr>
  32.              `
  33.         }
  34.         document.querySelector('.score-case  tbody').innerHTML = str
  35.         // 计算总分 平均分 渲染到页面
  36.         document.querySelector('.total').innerHTML = `总分：${sum}`
  37.         document.querySelector('.average').innerHTML = `平均分：${
  38.           (sum / list.length).toFixed(2) === 'NaN'
  39.             ? 0
  40.             : (sum / list.length).toFixed(2)
  41.         }`
  42.       }
  43.       render()
  44.  
  45.       // 2 添加业务
  46.       const submit = document.querySelector('.submit')
  47.       submit.addEventListener('click', function () {
  48.         const uname = document.querySelector('.username')
  49.         const subject = document.querySelector('.subject')
  50.         const score = document.querySelector('.score')
  51.         const uname_v = uname.value.trim()
  52.         const subject_v = subject.value.trim()
  53.         const score_v = +score.value.trim()
  54.         if (!uname_v || !subject_v || !score_v) {
  55.           alert('姓名、科目 或分数都不能为空 ')
  56.           return
  57.         }
  58.         list.push({
  59.           uname: uname_v,
  60.           subject: subject_v,
  61.           score: score_v,
  62.         })
  63.         //  重新渲染
  64.         render()
  65.         // 清空文本框
  66.         uname.value = ''
  67.         subject.value = ''
  68.         score.value = ''
  69.       })
  70.  
  71.       //  3 删除
  72.       document.querySelector('tbody').addEventListener('click', function (e) {
  73.         console.log(e.target.dataset.id)
  74.         //  把数组中对应的数据删除
  75.         list.splice(e.target.dataset.id, 1)
  76.         // 重新渲染
  77.         render()
  78.       })
  79.     </script>

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="./styles/index.css" />
  8.     <title>Document</title>
  9.   </head>
  10.  
  11.   <body>
  12.     <div id="app" class="score-case">
  13.       <div class="table">
  14.         <table>
  15.           <thead>
  16.             <tr>
  17.               <th>姓名</th>
  18.               <th>科目</th>
  19.               <th>成绩</th>
  20.               <th>操作</th>
  21.             </tr>
  22.           </thead>
  23.           <tbody>
  24.             <!-- <tr>
  25.               <td>1</td>
  26.               <td>语文</td>
  27.               <td class="red">46</td>
  28.               <td><a href="#">删除</a></td>
  29.             </tr> -->
  30.           </tbody>
  31.  
  32.           <tfoot>
  33.             <tr>
  34.               <td colspan="5">
  35.                 <span class="total">总分：246</span>
  36.                 <span style="margin-left: 50px" class="average"
  37.                   >平均分：79</span
  38.                 >
  39.               </td>
  40.             </tr>
  41.           </tfoot>
  42.         </table>
  43.       </div>
  44.       <div class="form">
  45.         <div class="form-item">
  46.           <div class="label">姓名：</div>
  47.           <div class="input">
  48.             <input type="text" placeholder="请输入姓名" class="username" />
  49.           </div>
  50.         </div>
  51.         <div class="form-item">
  52.           <div class="label">科目：</div>
  53.           <div class="input">
  54.             <input type="text" placeholder="请输入科目" class="subject" />
  55.           </div>
  56.         </div>
  57.         <div class="form-item">
  58.           <div class="label">分数：</div>
  59.           <div class="input">
  60.             <input type="text" placeholder="请输入分数" class="score" />
  61.           </div>
  62.         </div>
  63.         <div class="form-item">
  64.           <div class="label"></div>
  65.           <div class="input">
  66.             <button class="submit">添加</button>
  67.           </div>
  68.         </div>
  69.       </div>
  70.     </div>
  71.  
  72.     <script>
  73.       const list = [
  74.         {
  75.           uname: '张三',
  76.           subject: '语文',
  77.           score: 20,
  78.         },
  79.         {
  80.           uname: '李四',
  81.           subject: '数学',
  82.           score: 20,
  83.         },
  84.         {
  85.           uname: '王五',
  86.           subject: '英文',
  87.           score: 20,
  88.         },
  89.       ]
  90.       // 1 基于数据渲染页面
  91.       function render() {
  92.         let str = ''
  93.         let sum = 0
  94.         for (let i = 0; i < list.length; i++) {
  95.           sum += list[i].score
  96.           str += `
  97.              <tr>
  98.               <td>${list[i].uname}</td>
  99.               <td>${list[i].subject}</td>
  100.               <td class="red">${list[i].score}</td>
  101.               <td><a href="#" data-id=${i}>删除</a></td>
  102.             </tr>
  103.              `
  104.         }
  105.         document.querySelector('.score-case  tbody').innerHTML = str
  106.         // 计算总分 平均分 渲染到页面
  107.         document.querySelector('.total').innerHTML = `总分：${sum}`
  108.         document.querySelector('.average').innerHTML = `平均分：${
  109.           (sum / list.length).toFixed(2) === 'NaN'
  110.             ? 0
  111.             : (sum / list.length).toFixed(2)
  112.         }`
  113.       }
  114.       render()
  115.  
  116.       // 2 添加业务
  117.       const submit = document.querySelector('.submit')
  118.       submit.addEventListener('click', function () {
  119.         const uname = document.querySelector('.username')
  120.         const subject = document.querySelector('.subject')
  121.         const score = document.querySelector('.score')
  122.         const uname_v = uname.value.trim()
  123.         const subject_v = subject.value.trim()
  124.         const score_v = +score.value.trim()
  125.         if (!uname_v || !subject_v || !score_v) {
  126.           alert('姓名、科目 或分数都不能为空 ')
  127.           return
  128.         }
  129.         list.push({
  130.           uname: uname_v,
  131.           subject: subject_v,
  132.           score: score_v,
  133.         })
  134.         //  重新渲染
  135.         render()
  136.         // 清空文本框
  137.         uname.value = ''
  138.         subject.value = ''
  139.         score.value = ''
  140.       })
  141.  
  142.       //  3 删除
  143.       document.querySelector('tbody').addEventListener('click', function (e) {
  144.         console.log(e.target.dataset.id)
  145.         //  把数组中对应的数据删除
  146.         list.splice(e.target.dataset.id, 1)
  147.         // 重新渲染
  148.         render()
  149.       })
  150.     </script>
  151.   </body>
  152. </html>
  153.

效果图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/888730
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号