devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Web学习基础应用-可编辑表格_前端可编辑表格

作者：代码探险家 | 2024-07-02 12:46:30

赞

踩

前端可编辑表格

       

前文

         可编辑表格在JavaScript中是比较经典的基础应用，涉及的知识内容就是最普遍的增删改查的设计思路。我在基础学习的过程中学学到的就是拿到你一个作业的时候，先分析需求，构思完结构代码之后再进行消详细的代码实现。

        通过使用JavaScript，我们可以实现一个交互性强、用户友好的可编辑表格，使用户能够直接在表格中修改和更新数据，简化数据管理的过程。可编辑表格在数据输入、展示和编辑等方面具有广泛的应用。无论是构建一个在线表单、创建一个数据报表，还是设计一个动态的数据展示界面，掌握可编辑表格的概念和技术都是非常重要的。

        在本篇博客中，我们将重点讨论使用JavaScript实现可编辑表格的基础知识和技术。我们将逐步介绍相关的概念，帮助您建立对可编辑表格的全面理解。首先，我们将了解如何使用JavaScript选取和操作表格元素。我们将学习如何通过DOM (Document Object Model)访问和修改表格的行、列、单元格，以及相关的属性和样式。接下来，我们将探讨如何实现表格的编辑功能。我们将学习如何捕获用户的输入事件，并将其应用到相应的表格单元格中。我在基础学习的过程中学学到的就是拿到你一个作业的时候，先分析需求，构思完结构代码之后再进行消详细的代码实现。

       

         网页界面：

CODE       

        HTML详细代码如下：

  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.     <title>风灵月影宗</title>
  8.     <link rel="stylesheet" href="style.css" />
  9.   </head>
  10.   <body>
  11.     <div id="errorAlter">
  12.       <span>输错啦!请输入0到99999的值</span>
  13.     </div>
  14.     <div class="header">
  15.       <h1>风灵月影</h1>
  16.     </div>
  17.     <div class="tableDiv">
  18.       <table>
  19.         <thead>
  20.           <tr>
  21.             <th>编号</th>
  22.             <th>姓名</th>
  23.             <th>生命力</th>
  24.             <th>攻击力</th>
  25.             <th>防御力</th>
  26.             <th>耐力</th>
  27.             <th>移速</th>
  28.             <th>攻速</th>
  29.             <th>操作</th>
  30.           </tr>
  31.         </thead>
  32.         <tbody id="addNewTdArea">
  33.           <tr>
  34.             <td><span class="item2" title="胆敢向神伸出爪牙?">0</span></td>
  35.             <td><span class="item2" title="胆敢向神伸出爪牙?">神</span></td>
  36.             <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
  37.             <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
  38.             <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
  39.             <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
  40.             <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
  41.             <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
  42.             <td>————</td>
  43.             <!--
  44.             <td>0</td>
  45.             <td>神</td>
  46.             <td>99999</td>
  47.             <td>99999</td>
  48.             <td>99999</td>
  49.             <td>99999</td>
  50.             <td>99999</td>
  51.             <td>99999</td>
  52.             <td>————</td>
  53.             -->
  54.           </tr>
  55.           <tr class="delPower">
  56.             <td>114514</td>
  57.             <td>李田所</td>
  58.             <td name="upData">1919</td>
  59.             <td name="upData">8</td>
  60.             <td name="upData">10</td>
  61.             <td name="upData">20</td>
  62.             <td name="upData">33.5</td>
  63.             <td name="upData">20</td>
  64.             <td class="delTrBtn">踢出队伍</td>
  65.           </tr>
  66.           <tr class="delPower">
  67.             <td>414</td>
  68.             <td>丘比</td>
  69.             <td name="upData">414</td>
  70.             <td name="upData">414</td>
  71.             <td name="upData">414</td>
  72.             <td name="upData">414</td>
  73.             <td name="upData">414</td>
  74.             <td name="upData">414</td>
  75.             <td class="delTrBtn">踢出队伍</td>
  76.           </tr>
  77.         </tbody>
  78.       </table>
  79.     </div>
  80.     <div id="setNewform">
  81.       <h3>招募角色</h3>
  82.       <table>
  83.         <thead>
  84.           <tr>
  85.             <th>编号</th>
  86.             <th>姓名</th>
  87.             <th>生命力</th>
  88.             <th>攻击力</th>
  89.             <th>防御力</th>
  90.             <th>耐力</th>
  91.             <th>移速</th>
  92.             <th>攻速</th>
  93.           </tr>
  94.         </thead>
  95.         <tbody>
  96.           <tr>
  97.             <td class="inputContent"><input type="text" /></td>
  98.             <td class="inputContent"><input type="text" /></td>
  99.             <td class="inputContent"><input type="text" /></td>
  100.             <td class="inputContent"><input type="text" /></td>
  101.             <td class="inputContent"><input type="text" /></td>
  102.             <td class="inputContent"><input type="text" /></td>
  103.             <td class="inputContent"><input type="text" /></td>
  104.             <td class="inputContent"><input type="text" /></td>
  105.           </tr>
  106.         </tbody>
  107.       </table>
  108.     </div>
  109.     <input type="submit" value="确定招募" id="addTrBtn" />
  110.     <div id="errorInputId">
  111.       <h4>编号是不是有点问题捏?(1~999999的纯数字)</h4>
  112.     </div>
  113.     <div id="errorInputName">
  114.       <h4>姓名是不是有点问题捏?(1到6位英文字符)</h4>
  115.     </div>
  116.     <div id="errorInputProperty">
  117.       <h4>属性是不是有点问题捏？(1~999999的纯数字)</h4>
  118.     </div>
  119.     <div class="tips">
  120.       <ul>
  121.         <li>本表格仅仅实现部分数值的修改，数值在0到99999之间</li>
  122.         <li>角色的添加和增加工作均开发完成</li>
  123.         <li>json尚未包装</li>
  124.         <li>后续开发工作有</li>
  125.         <li>属性报错的时候指出是哪个属性报错</li>
  126.         <li>在玩家设置编号的时候将编号设为唯一值，不可重复</li>
  127.         <li>开放姓名的可编辑性</li>
  128.         <li>更好的Css样式</li>
  129.       </ul>
  130.     </div>
  131.   </body>
  132.   <script src="script.js"></script>
  133. </html>

        CSS代码如下：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. .header {
  6.   margin: 70px auto;
  7.   text-align: center;
  8. }
  9. .tableDiv {
  10.   margin: 10px;
  11. }
  12. table {
  13.   border-collapse: collapse;
  14.   width: 100%;
  15.   margin-bottom: 20px;
  16. }
  17. table th {
  18.   background-color: #f2f2f2;
  19.   border: 1px solid #ddd;
  20.   padding: 10px;
  21.   text-align: left;
  22.   font-weight: bold;
  23. }
  24. table td {
  25.   position: relative;
  26.   border: 1px solid #ddd;
  27.   padding: 10px;
  28.   text-align: left;
  29. }
  30. /*       
  31.       table tr:nth-child(even) {
  32.       background-color: #f2f2f2; 
  33.       }
  34.       */
  35. table tr td:hover {
  36.   background-color: #e6f7ff;
  37. }
  38. .tableDiv > table > tbody > tr > td > span {
  39.   width: 90%;
  40. }
  41.  
  42. .tableDiv > table > tbody > tr > td > input {
  43.   width: 100%;
  44.   height: 100%;
  45.   border: 2px solid red;
  46.   padding-left: 10px;
  47.   box-sizing: border-box;
  48.   position: absolute;
  49.   top: 0;
  50.   left: 0;
  51.   font-size: 16px;
  52. }
  53. .tips {
  54.   border: 1px solid gray;
  55.   width: 500px;
  56.   padding: 20px;
  57.   margin: 20px 50px;
  58. }
  59. .tips ul li {
  60.   margin: 5px;
  61. }
  62.  
  63. /* newpart */
  64. /* 萌娘百科黑幕  究极修订版*/
  65. .item2 {
  66.   color: transparent;
  67.   background-color: black;
  68.   transition: all 0.5s ease;
  69.   padding: 5px;
  70.   border-radius: 3px;
  71.   position: relative;
  72.   display: inline-block;
  73.   z-index: 1;
  74. }
  75.  
  76. .item2:before {
  77.   content: "";
  78.   display: block;
  79.   width: 100%;
  80.   height: 100%;
  81.   position: absolute;
  82.   top: 0;
  83.   left: 0;
  84.   z-index: -1;
  85.   background-image: inherit;
  86.   filter: blur(10px);
  87.   transform: scale(1.2);
  88.   opacity: 0;
  89.   transition: opacity 0.5s ease;
  90. }
  91.  
  92. .item2:hover:before {
  93.   opacity: 1;
  94. }
  95.  
  96. .item2:hover {
  97.   color: white;
  98. }
  99.  
  100. #setNewform {
  101.   margin: 10px;
  102. }
  103.  
  104. #setNewform > h3 {
  105.   margin: 30px auto;
  106.   text-align: center;
  107. }
  108. #setNewform > table > tbody > tr > td > input {
  109.   width: 100%;
  110.   height: 200%;
  111.   padding-left: 10px;
  112.   box-sizing: border-box;
  113.   position: absolute;
  114.   top: 0;
  115.   left: 0;
  116.   font-size: 20px;
  117. }
  118. input[type="submit"] {
  119.   display: block;
  120.   margin: 20px auto;
  121.   margin-top: 40px;
  122.   padding: 10px 20px;
  123.   background-color: #4caf50;
  124.   color: #fff;
  125.   border: none;
  126.   border-radius: 5px;
  127.   font-size: 16px;
  128.   cursor: pointer;
  129. }
  130.  
  131. /* 用户修改报错 */
  132. #errorAlter {
  133.   position: fixed;
  134.   top: -100px;
  135.   left: 0;
  136.   width: 100%;
  137.   background-color: #ffcc00;
  138.   color: #333;
  139.   font-size: 18px;
  140.   text-align: center;
  141.   padding: 10px 0;
  142.   transition: top 0.3s ease-in-out;
  143. }
  144.  
  145. #errorAlter.show {
  146.   top: 0;
  147. }
  148.  
  149. /* 用户输入太离谱报错 */
  150. #errorInputId {
  151.   display: none;
  152.   background-color: #ff9999;
  153.   border: 2px solid #ff6666;
  154.   color: #660000;
  155.   padding: 10px;
  156.   text-align: center;
  157.   margin-top: 10px;
  158.   animation: shake 0.3s ease-in-out;
  159. }
  160.  
  161. #errorInputId h4 {
  162.   font-size: 16px;
  163.   font-weight: bold;
  164.   margin: 0;
  165. }
  166. #errorInputName {
  167.   display: none;
  168.   background-color: #ff9999;
  169.   border: 2px solid #ff6666;
  170.   color: #660000;
  171.   padding: 10px;
  172.   text-align: center;
  173.   margin-top: 10px;
  174.   animation: shake 0.3s ease-in-out;
  175. }
  176.  
  177. #errorInputName h4 {
  178.   font-size: 16px;
  179.   font-weight: bold;
  180.   margin: 0;
  181. }
  182. #errorInputProperty {
  183.   display: none;
  184.   background-color: #ff9999;
  185.   border: 2px solid #ff6666;
  186.   color: #660000;
  187.   padding: 10px;
  188.   text-align: center;
  189.   margin-top: 10px;
  190.   animation: shake 0.3s ease-in-out;
  191. }
  192.  
  193. #errorInputProperty h4 {
  194.   font-size: 16px;
  195.   font-weight: bold;
  196.   margin: 0;
  197. }
  198. /* 小抖一下 */
  199. @keyframes shake {
  200.   0% {
  201.     transform: translateX(0);
  202.   }
  203.   10% {
  204.     transform: translateX(-10px);
  205.   }
  206.   20% {
  207.     transform: translateX(10px);
  208.   }
  209.   30% {
  210.     transform: translateX(-10px);
  211.   }
  212.   40% {
  213.     transform: translateX(10px);
  214.   }
  215.   50% {
  216.     transform: translateX(-10px);
  217.   }
  218.   60% {
  219.     transform: translateX(10px);
  220.   }
  221.   70% {
  222.     transform: translateX(-10px);
  223.   }
  224.   80% {
  225.     transform: translateX(10px);
  226.   }
  227.   90% {
  228.     transform: translateX(-10px);
  229.   }
  230.   100% {
  231.     transform: translateX(0);
  232.   }
  233. }

        JS代码如下：

  1. //角色修改数值模块
  2.  
  3. var upDatas = document.getElementsByName("upData");
  4.  
  5. // 给角色的数值模块添加事件绑定
  6. function setTdCilck() {
  7.   for (let i = 0; i < upDatas.length; i++) {
  8.     upDatas[i].onclick = function () {
  9.       updateTd(this);
  10.     };
  11.   }
  12. }
  13. setTdCilck();
  14.  
  15. //报错提示 升级版
  16. const inputElement = document.getElementById("input-element");
  17. const errorContainer = document.getElementById("errorAlter");
  18. function showError() {
  19.   errorContainer.classList.add("show");
  20. }
  21. function hideError() {
  22.   errorContainer.classList.remove("show");
  23. }
  24.  
  25. // 角色修改数值函数
  26. function updateTd(newContent) {
  27.   if (document.getElementsByClassName("active-input").length == 0) {
  28.     var oldhtml = newContent.innerHTML;
  29.     newContent.innerHTML = "";
  30.     var newInput = document.createElement("input");
  31.     newInput.setAttribute("class", "active-input");
  32.     newInput.value = oldhtml;
  33.     const reg = /^[1-9][0-9]{0,4}$/;
  34.     newInput.onblur = function () {
  35.       if (reg.test(this.value)) {
  36.         newContent.innerHTML = this.value;
  37.         hideError();
  38.       } else {
  39.         showError();
  40.         newContent.innerHTML = oldhtml;
  41.       }
  42.     };
  43.     newContent.appendChild(newInput);
  44.   } else {
  45.     return;
  46.   }
  47. }
  48.  
  49.  
  50. //添加新角色模块
  51.  
  52. var trs = document.getElementsByTagName("tr"); //获取所有的tr元素
  53. var tds = document.querySelectorAll(".inputContent input"); // 获取所有的 input 元素
  54. var addNewTdArea = document.getElementById("addNewTdArea"); //获取tbody标签，以方便在它的后面添加子队员（tr）
  55. var addTrBtn = document.getElementById("addTrBtn"); //获取确定招募队友的btn
  56. var errorInputId = document.getElementById("errorInputId"); //获取编号报错的Div
  57. var errorInputName = document.getElementById("errorInputName"); //获取姓名报错的Div
  58. var errorInputProperty = document.getElementById("errorInputProperty"); //获取属性报错的Div
  59. //添加角色函数
  60. function addTr(tds) {
  61.   //给招募队友按钮绑定事件
  62.   addTrBtn.onclick = function () {
  63.     var userInputValue = []; //定义空数组，用于保存用户输入的input里的值
  64.     for (let i = 0; i < tds.length; i++) {
  65.       userInputValue[i] = tds[i].value; // 获取 input 元素的值
  66.     }
  67.     //给用户输入的数据做验证，不要太离谱
  68.     //编号部分 编号限定在1到999999之间的数字,可以重复。
  69.     const idTest = /^[1-9][0-9]{0,5}$/;
  70.     if (idTest.test(userInputValue[0])) {
  71.       //编号通过！
  72.       errorInputId.setAttribute("style", "display:none"); //隐藏编号报错
  73.       //姓名部分 姓名限定在1到6位的英文字符，可以重复
  74.       const nameTest = /^[a-zA-Z]{1,6}$/;
  75.       if (nameTest.test(userInputValue[1])) {
  76.         //姓名通过！
  77.         errorInputName.setAttribute("style", "display:none"); //隐藏姓名报错
  78.         //数值部分，因为最好不要套太多if 所以就一起验证了算了（，数值限定在1到99999的数字，可以重复
  79.         const propertyTest = /^[1-9][0-9]{0,4}$/;
  80.         let allValid = true; //定义allValid用于判断属性是否通过的循环验证
  81.         for (let i = 2; i < userInputValue.length; i++) {
  82.           if (!propertyTest.test(userInputValue[i])) {
  83.             allValid = false; //allValid为false说明属性数组里有不符合规则的值
  84.             break; //直接退出！！！！
  85.           }
  86.         }
  87.         if (allValid) {
  88.           //数值通过！
  89.           errorInputProperty.setAttribute("style", "display:none"); //隐藏属性报错
  90.           //创建标签用于插入tbody的下面
  91.           const row = `<tr> 
  92.                   <td>${userInputValue[0]}</td>
  93.                   <td>${userInputValue[1]}</td>
  94.                   <td name="upData">${userInputValue[2]}</td>
  95.                   <td name="upData">${userInputValue[3]}</td>
  96.                   <td name="upData">${userInputValue[4]}</td>
  97.                   <td name="upData">${userInputValue[5]}</td>
  98.                   <td name="upData">${userInputValue[6]}</td>
  99.                   <td name="upData">${userInputValue[7]}</td>
  100.                   <td class="delTrBtn1">踢出队伍</td>
  101.                 </tr>`;
  102.           // 将新角色添加到队伍中
  103.           var newRow = addNewTdArea.insertRow(); // 创建新行
  104.           newRow.innerHTML = row;
  105.  
  106.           // 给新角色绑定修改功能
  107.           setTdCilck();
  108.  
  109.           //给新角色绑定踢出功能
  110.           var newDelTrBtn = newRow.querySelector(".delTrBtn1"); // 获取 "踢出队伍" 按钮
  111.           newDelTrBtn.onclick = function () {
  112.             // 给按钮添加点击事件监听器
  113.             var confirmed = confirm("确定踢出这位角色吗？");
  114.             if (confirmed) {
  115.               // 如果用户点击了确定按 钮，则返回 alert("已踢出")
  116.               addNewTdArea.deleteRow(newRow.rowIndex - 1); // 删除对应的行
  117.               alert("已踢出");
  118.               hideError();
  119.             } else {
  120.               // 如果用户点击了取消按钮，则返回 alert("这都不踢？")
  121.               return alert("这都不踢？");
  122.             }
  123.           };
  124.           //创建完角色后将用户输入置空 人性化设计
  125.           for (var i = 0; i < tds.length; i++) {
  126.             tds[i].value = "";
  127.           }
  128.         } else {
  129.           errorInputProperty.setAttribute("style", "display:block"); //属性输入报错
  130.         }
  131.       } else {
  132.         errorInputName.setAttribute("style", "display:block"); //姓名输入报错
  133.       }
  134.     } else {
  135.       errorInputId.setAttribute("style", "display:block"); //编号输入报错
  136.     }
  137.   };
  138. }
  139. addTr(tds);
  140.  
  141.  
  142. //删除模块
  143.  
  144. var trss = document.getElementsByClassName("delPower"); // 获取原始队伍里的两个角色的tr
  145. var delTrBtn = document.getElementsByClassName("delTrBtn"); //获取原始队伍里的两个角色的踢出队伍操作
  146. //给踢出队伍的tr绑定删除事件
  147. function setTrDel() {
  148.   for (let i = 0; i < delTrBtn.length; i++) {
  149.     delTrBtn[i].onclick = function () {
  150.       delTr(i);
  151.     };
  152.   }
  153. }
  154. setTrDel();
  155. //删除函数本体
  156. function delTr(i) {
  157.   // 使用 confirm 函数弹出提示框
  158.   var confirmed = confirm("确定踢出这位角色吗？");
  159.   if (confirmed) {
  160.     trss[i].remove(); //直接踢出当前点击的角色（移除它的tr）
  161.     alert("已踢出");
  162.     hideError();
  163.   } else {
  164.     alert("这都不踢？");
  165.   }
  166.   //重新绑定(这个地方搞半天了)
  167.   setTrDel();
  168. }

        HTML与CSS代码作为基本网页结构代码就不做讲解。更多的重心应该在JS的实现上面。

角色修改数值模块

JS功能模块分析

        修改数值模块：

  1. var upDatas = document.getElementsByName("upData");
  2.  
  3. // 给角色的数值模块添加事件绑定
  4. function setTdCilck() {
  5.   for (let i = 0; i < upDatas.length; i++) {
  6.     upDatas[i].onclick = function () {
  7.       updateTd(this);
  8.     };
  9.   }
  10. }
  11. setTdCilck();
  12.  
  13. //报错提示 升级版
  14. const inputElement = document.getElementById("input-element");
  15. const errorContainer = document.getElementById("errorAlter");
  16. function showError() {
  17.   errorContainer.classList.add("show");
  18. }
  19. function hideError() {
  20.   errorContainer.classList.remove("show");
  21. }
  22.  
  23. // 角色修改数值函数
  24. function updateTd(newContent) {
  25.   if (document.getElementsByClassName("active-input").length == 0) {
  26.     var oldhtml = newContent.innerHTML;
  27.     newContent.innerHTML = "";
  28.     var newInput = document.createElement("input");
  29.     newInput.setAttribute("class", "active-input");
  30.     newInput.value = oldhtml;
  31.     const reg = /^[1-9][0-9]{0,4}$/;
  32.     newInput.onblur = function () {
  33.       if (reg.test(this.value)) {
  34.         newContent.innerHTML = this.value;
  35.         hideError();
  36.       } else {
  37.         showError();
  38.         newContent.innerHTML = oldhtml;
  39.       }
  40.     };
  41.     newContent.appendChild(newInput);
  42.   } else {
  43.     return;
  44.   }
  45. }

        在这段代码中，我们首先通过document.getElementsByName("upData")获取了所有具有name属性为"upData"的元素，这些元素对应可编辑的表格单元格。接着，我们使用setTdCilck()函数给这些表格单元格添加了点击事件监听器。也就是绑定点击修改事件

        在点击事件处理函数updateTd()中，我们首先检查是否已经有其他表格单元格正在编辑状态，如果是，则直接返回，避免重复编辑。然后，我们获取被点击的表格单元格的内容，并将其替换为空。接下来，创建一个input元素，并设置其class为"active-input"，将之前的表格单元格内容赋值给input的value属性。然后，我们定义了一个正则表达式reg用于验证用户输入的数值是否符合规定格式。在input的blur事件中，我们进行数值的验证，如果通过验证，则将用户输入的数值赋值给表格单元格，并隐藏错误提示；如果验证不通过，则显示错误提示，并恢复表格单元格原本的内容。通过以上的代码，我们实现了在可编辑表格中修改数值的功能，并对用户输入进行了简单的格式验证和错误提示。

       接下来，我们将继续探讨其他功能模块，如添加新角色和删除角色模块，以完善我们的可编辑表格应用程序。

        添加角色模块：
 

  1. //添加新角色模块
  2.  
  3. var trs = document.getElementsByTagName("tr"); //获取所有的tr元素
  4. var tds = document.querySelectorAll(".inputContent input"); // 获取所有的 input 元素
  5. var addNewTdArea = document.getElementById("addNewTdArea"); //获取tbody标签，以方便在它的后面添加子队员（tr）
  6. var addTrBtn = document.getElementById("addTrBtn"); //获取确定招募队友的btn
  7. var errorInputId = document.getElementById("errorInputId"); //获取编号报错的Div
  8. var errorInputName = document.getElementById("errorInputName"); //获取姓名报错的Div
  9. var errorInputProperty = document.getElementById("errorInputProperty"); //获取属性报错的Div
  10. //添加角色函数
  11. function addTr(tds) {
  12.   //给招募队友按钮绑定事件
  13.   addTrBtn.onclick = function () {
  14.     var userInputValue = []; //定义空数组，用于保存用户输入的input里的值
  15.     for (let i = 0; i < tds.length; i++) {
  16.       userInputValue[i] = tds[i].value; // 获取 input 元素的值
  17.     }
  18.     //给用户输入的数据做验证，不要太离谱
  19.     //编号部分 编号限定在1到999999之间的数字,可以重复。
  20.     const idTest = /^[1-9][0-9]{0,5}$/;
  21.     if (idTest.test(userInputValue[0])) {
  22.       //编号通过！
  23.       errorInputId.setAttribute("style", "display:none"); //隐藏编号报错
  24.       //姓名部分 姓名限定在1到6位的英文字符，可以重复
  25.       const nameTest = /^[a-zA-Z]{1,6}$/;
  26.       if (nameTest.test(userInputValue[1])) {
  27.         //姓名通过！
  28.         errorInputName.setAttribute("style", "display:none"); //隐藏姓名报错
  29.         //数值部分，因为最好不要套太多if 所以就一起验证了算了（，数值限定在1到99999的数字，可以重复
  30.         const propertyTest = /^[1-9][0-9]{0,4}$/;
  31.         let allValid = true; //定义allValid用于判断属性是否通过的循环验证
  32.         for (let i = 2; i < userInputValue.length; i++) {
  33.           if (!propertyTest.test(userInputValue[i])) {
  34.             allValid = false; //allValid为false说明属性数组里有不符合规则的值
  35.             break; //直接退出！！！！
  36.           }
  37.         }
  38.         if (allValid) {
  39.           //数值通过！
  40.           errorInputProperty.setAttribute("style", "display:none"); //隐藏属性报错
  41.           //创建标签用于插入tbody的下面
  42.           const row = `<tr> 
  43.                   <td>${userInputValue[0]}</td>
  44.                   <td>${userInputValue[1]}</td>
  45.                   <td name="upData">${userInputValue[2]}</td>
  46.                   <td name="upData">${userInputValue[3]}</td>
  47.                   <td name="upData">${userInputValue[4]}</td>
  48.                   <td name="upData">${userInputValue[5]}</td>
  49.                   <td name="upData">${userInputValue[6]}</td>
  50.                   <td name="upData">${userInputValue[7]}</td>
  51.                   <td class="delTrBtn1">踢出队伍</td>
  52.                 </tr>`;
  53.           // 将新角色添加到队伍中
  54.           var newRow = addNewTdArea.insertRow(); // 创建新行
  55.           newRow.innerHTML = row;
  56.  
  57.           // 给新角色绑定修改功能
  58.           setTdCilck();
  59.  
  60.           //给新角色绑定踢出功能
  61.           var newDelTrBtn = newRow.querySelector(".delTrBtn1"); // 获取 "踢出队伍" 按钮
  62.           newDelTrBtn.onclick = function () {
  63.             // 给按钮添加点击事件监听器
  64.             var confirmed = confirm("确定踢出这位角色吗？");
  65.             if (confirmed) {
  66.               // 如果用户点击了确定按 钮，则返回 alert("已踢出")
  67.               addNewTdArea.deleteRow(newRow.rowIndex - 1); // 删除对应的行
  68.               alert("已踢出");
  69.               hideError();
  70.             } else {
  71.               // 如果用户点击了取消按钮，则返回 alert("这都不踢？")
  72.               return alert("这都不踢？");
  73.             }
  74.           };
  75.           //创建完角色后将用户输入置空 人性化设计
  76.           for (var i = 0; i < tds.length; i++) {
  77.             tds[i].value = "";
  78.           }
  79.         } else {
  80.           errorInputProperty.setAttribute("style", "display:block"); //属性输入报错
  81.         }
  82.       } else {
  83.         errorInputName.setAttribute("style", "display:block"); //姓名输入报错
  84.       }
  85.     } else {
  86.       errorInputId.setAttribute("style", "display:block"); //编号输入报错
  87.     }
  88.   };
  89. }
  90. addTr(tds);

添加角色模块的实现。这个模块允许用户输入角色的信息，并将其添加到表格中。

代码中的addTr函数是添加角色的核心函数。它通过监听"招募队友"按钮的点击事件来触发角色添加操作。当按钮被点击时，该函数会执行以下步骤：

  1. 从HTML页面中获取用户输入的角色信息，并保存在userInputValue数组中。
  2. 使用正则表达式进行数据验证，确保编号、姓名和属性值符合特定的格式要求。
  3. 如果验证通过，创建一个新的HTML字符串表示角色的表格行，并将其插入到表格中。
  4. 为新添加的角色行绑定事件处理程序，以实现修改和删除功能。
  5. 清空用户输入的文本框，为下一次输入做准备。
  6. 如果验证未通过，根据具体的验证错误显示相应的报错信息。

通过这个添加角色模块，用户可以逐步输入角色的编号、姓名和属性值，系统会根据输入的数据动态创建表格行，并为每个角色提供修改和删除功能。这样用户就可以方便地管理角色数据。

        角色删除模块：

  1. var trss = document.getElementsByClassName("delPower"); // 获取原始队伍里的两个角色的tr
  2. var delTrBtn = document.getElementsByClassName("delTrBtn"); //获取原始队伍里的两个角色的踢出队伍操作
  3. //给踢出队伍的tr绑定删除事件
  4. function setTrDel() {
  5.   for (let i = 0; i < delTrBtn.length; i++) {
  6.     delTrBtn[i].onclick = function () {
  7.       delTr(i);
  8.     };
  9.   }
  10. }
  11. setTrDel();
  12. //删除函数本体
  13. function delTr(i) {
  14.   // 使用 confirm 函数弹出提示框
  15.   var confirmed = confirm("确定踢出这位角色吗？");
  16.   if (confirmed) {
  17.     trss[i].remove(); //直接踢出当前点击的角色（移除它的tr）
  18.     alert("已踢出");
  19.     hideError();
  20.   } else {
  21.     alert("这都不踢？");
  22.   }
  23.   //重新绑定(这个地方搞半天了)
  24.   setTrDel();
  25. }

        代码中通过document.getElementsByClassName获取了原始队伍中的角色行和踢出队伍操作按钮的元素集合。接下来，定义了setTrDel函数用于绑定删除事件。setTrDel函数通过遍历delTrBtn元素集合，为每个踢出按钮绑定点击事件。当按钮被点击时，会调用delTr函数，并将相应的角色行的索引作为参数传递给它。

delTr函数是删除操作的核心函数。它执行以下操作：

  1. 使用confirm函数弹出确认对话框，询问用户是否确定删除该角色。
  2. 如果用户点击了确认按钮，将直接从表格中移除当前点击的角色行（使用remove()方法）。
  3. 显示一个提示框，告知用户角色已被成功移除。
  4. 调用hideError函数，隐藏可能存在的错误提示信息。
  5. 最后，重新绑定删除事件，以保证删除功能在表格中的角色行更新后仍然有效。

     通过这个删除模块，用户可以选择要删除的角色，并在确认后将其从表格中移除。这样用户可以方便地管理队伍中的角色。

总结：

        在本博客中，我们学习了基于Web技术的可编辑表格应用。通过使用JavaScript、HTML和CSS，我们成功实现了角色修改数值、添加新角色和删除角色的功能。

        通过角色修改数值模块，用户可以点击数值单元格，将其转换为可编辑状态，并更新数值。我们还加入了输入验证功能，确保用户输入的数值符合规定的范围。

        添加新角色模块允许用户输入角色的编号、姓名和数值，并将其添加到表格中。我们对用户输入进行了验证，以确保数据的准确性和合法性。

        删除模块允许用户从表格中踢出不需要的角色。用户可以点击相应的删除按钮，并在确认后将角色从表格中移除。

        通过这个完整的可编辑表格应用示例，我们深入了解了Web开发中的前端技术。JavaScript作为核心语言，驱动着应用的交互逻辑。HTML和CSS则负责呈现用户界面和样式效果。通过学习这个应用示例，我们掌握了一些基础的Web开发技巧，例如DOM操作、事件处理、输入验证和动态元素创建。这些技术对于构建更复杂的Web应用和提升用户体验非常重要。

        希望本博客能够帮助你打下坚实的Web开发基础，启发你在实际项目中应用这些技术。如果你对这个应用有任何疑问或想进一步拓展它，欢迎留言讨论。感谢你的阅读。

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

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

  

闽ICP备14008679号