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

AkitoSang

已于 2023-05-11 10:16:54 修改

阅读量780

点赞数

分类专栏：前端文章标签： javascript

于 2023-05-11 09:00:37 首次发布

本文链接：https://blog.csdn.net/m0_54180642/article/details/130613599

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前文

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

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

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

网页界面：

CODE

HTML详细代码如下：

<!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>风灵月影宗</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="errorAlter">
      <span>输错啦!请输入0到99999的值</span>
    </div>
    <div class="header">
      <h1>风灵月影</h1>
    </div>
    <div class="tableDiv">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>生命力</th>
            <th>攻击力</th>
            <th>防御力</th>
            <th>耐力</th>
            <th>移速</th>
            <th>攻速</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="addNewTdArea">
          <tr>
            <td><span class="item2" title="胆敢向神伸出爪牙?">0</span></td>
            <td><span class="item2" title="胆敢向神伸出爪牙?">神</span></td>
            <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
            <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
            <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
            <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
            <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
            <td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td>
            <td>————</td>
            <!--
            <td>0</td>
            <td>神</td>
            <td>99999</td>
            <td>99999</td>
            <td>99999</td>
            <td>99999</td>
            <td>99999</td>
            <td>99999</td>
            <td>————</td>
            -->
          </tr>
          <tr class="delPower">
            <td>114514</td>
            <td>李田所</td>
            <td name="upData">1919</td>
            <td name="upData">8</td>
            <td name="upData">10</td>
            <td name="upData">20</td>
            <td name="upData">33.5</td>
            <td name="upData">20</td>
            <td class="delTrBtn">踢出队伍</td>
          </tr>
          <tr class="delPower">
            <td>414</td>
            <td>丘比</td>
            <td name="upData">414</td>
            <td name="upData">414</td>
            <td name="upData">414</td>
            <td name="upData">414</td>
            <td name="upData">414</td>
            <td name="upData">414</td>
            <td class="delTrBtn">踢出队伍</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="setNewform">
      <h3>招募角色</h3>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>生命力</th>
            <th>攻击力</th>
            <th>防御力</th>
            <th>耐力</th>
            <th>移速</th>
            <th>攻速</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="inputContent"><input type="text" /></td>
            <td class="inputContent"><input type="text" /></td>
            <td class="inputContent"><input type="text" /></td>
            <td class="inputContent"><input type="text" /></td>
            <td class="inputContent"><input type="text" /></td>
            <td class="inputContent"><input type="text" /></td>
            <td class="inputContent"><input type="text" /></td>
            <td class="inputContent"><input type="text" /></td>
          </tr>
        </tbody>
      </table>
    </div>
    <input type="submit" value="确定招募" id="addTrBtn" />
    <div id="errorInputId">
      <h4>编号是不是有点问题捏?(1~999999的纯数字)</h4>
    </div>
    <div id="errorInputName">
      <h4>姓名是不是有点问题捏?(1到6位英文字符)</h4>
    </div>
    <div id="errorInputProperty">
      <h4>属性是不是有点问题捏？(1~999999的纯数字)</h4>
    </div>
    <div class="tips">
      <ul>
        <li>本表格仅仅实现部分数值的修改，数值在0到99999之间</li>
        <li>角色的添加和增加工作均开发完成</li>
        <li>json尚未包装</li>
        <li>后续开发工作有</li>
        <li>属性报错的时候指出是哪个属性报错</li>
        <li>在玩家设置编号的时候将编号设为唯一值，不可重复</li>
        <li>开放姓名的可编辑性</li>
        <li>更好的Css样式</li>
      </ul>
    </div>
  </body>
  <script src="script.js"></script>
</html>

CSS代码如下：

* {
  margin: 0;
  padding: 0;
}
.header {
  margin: 70px auto;
  text-align: center;
}
.tableDiv {
  margin: 10px;
}
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
}
table th {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
  font-weight: bold;
}
table td {
  position: relative;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
/*       
      table tr:nth-child(even) {
      background-color: #f2f2f2; 
      }
      */
table tr td:hover {
  background-color: #e6f7ff;
}
.tableDiv > table > tbody > tr > td > span {
  width: 90%;
}

.tableDiv > table > tbody > tr > td > input {
  width: 100%;
  height: 100%;
  border: 2px solid red;
  padding-left: 10px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16px;
}
.tips {
  border: 1px solid gray;
  width: 500px;
  padding: 20px;
  margin: 20px 50px;
}
.tips ul li {
  margin: 5px;
}

/* newpart */
/* 萌娘百科黑幕  究极修订版*/
.item2 {
  color: transparent;
  background-color: black;
  transition: all 0.5s ease;
  padding: 5px;
  border-radius: 3px;
  position: relative;
  display: inline-block;
  z-index: 1;
}

.item2:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: inherit;
  filter: blur(10px);
  transform: scale(1.2);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.item2:hover:before {
  opacity: 1;
}

.item2:hover {
  color: white;
}

#setNewform {
  margin: 10px;
}

#setNewform > h3 {
  margin: 30px auto;
  text-align: center;
}
#setNewform > table > tbody > tr > td > input {
  width: 100%;
  height: 200%;
  padding-left: 10px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20px;
}
input[type="submit"] {
  display: block;
  margin: 20px auto;
  margin-top: 40px;
  padding: 10px 20px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

/* 用户修改报错 */
#errorAlter {
  position: fixed;
  top: -100px;
  left: 0;
  width: 100%;
  background-color: #ffcc00;
  color: #333;
  font-size: 18px;
  text-align: center;
  padding: 10px 0;
  transition: top 0.3s ease-in-out;
}

#errorAlter.show {
  top: 0;
}

/* 用户输入太离谱报错 */
#errorInputId {
  display: none;
  background-color: #ff9999;
  border: 2px solid #ff6666;
  color: #660000;
  padding: 10px;
  text-align: center;
  margin-top: 10px;
  animation: shake 0.3s ease-in-out;
}

#errorInputId h4 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}
#errorInputName {
  display: none;
  background-color: #ff9999;
  border: 2px solid #ff6666;
  color: #660000;
  padding: 10px;
  text-align: center;
  margin-top: 10px;
  animation: shake 0.3s ease-in-out;
}

#errorInputName h4 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}
#errorInputProperty {
  display: none;
  background-color: #ff9999;
  border: 2px solid #ff6666;
  color: #660000;
  padding: 10px;
  text-align: center;
  margin-top: 10px;
  animation: shake 0.3s ease-in-out;
}

#errorInputProperty h4 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}
/* 小抖一下 */
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-10px);
  }
  20% {
    transform: translateX(10px);
  }
  30% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  50% {
    transform: translateX(-10px);
  }
  60% {
    transform: translateX(10px);
  }
  70% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  90% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}

JS代码如下：

//角色修改数值模块

var upDatas = document.getElementsByName("upData");

// 给角色的数值模块添加事件绑定
function setTdCilck() {
  for (let i = 0; i < upDatas.length; i++) {
    upDatas[i].onclick = function () {
      updateTd(this);
    };
  }
}
setTdCilck();

//报错提示 升级版
const inputElement = document.getElementById("input-element");
const errorContainer = document.getElementById("errorAlter");
function showError() {
  errorContainer.classList.add("show");
}
function hideError() {
  errorContainer.classList.remove("show");
}

// 角色修改数值函数
function updateTd(newContent) {
  if (document.getElementsByClassName("active-input").length == 0) {
    var oldhtml = newContent.innerHTML;
    newContent.innerHTML = "";
    var newInput = document.createElement("input");
    newInput.setAttribute("class", "active-input");
    newInput.value = oldhtml;
    const reg = /^[1-9][0-9]{0,4}$/;
    newInput.onblur = function () {
      if (reg.test(this.value)) {
        newContent.innerHTML = this.value;
        hideError();
      } else {
        showError();
        newContent.innerHTML = oldhtml;
      }
    };
    newContent.appendChild(newInput);
  } else {
    return;
  }
}


//添加新角色模块

var trs = document.getElementsByTagName("tr"); //获取所有的tr元素
var tds = document.querySelectorAll(".inputContent input"); // 获取所有的 input 元素
var addNewTdArea = document.getElementById("addNewTdArea"); //获取tbody标签，以方便在它的后面添加子队员（tr）
var addTrBtn = document.getElementById("addTrBtn"); //获取确定招募队友的btn
var errorInputId = document.getElementById("errorInputId"); //获取编号报错的Div
var errorInputName = document.getElementById("errorInputName"); //获取姓名报错的Div
var errorInputProperty = document.getElementById("errorInputProperty"); //获取属性报错的Div
//添加角色函数
function addTr(tds) {
  //给招募队友按钮绑定事件
  addTrBtn.onclick = function () {
    var userInputValue = []; //定义空数组，用于保存用户输入的input里的值
    for (let i = 0; i < tds.length; i++) {
      userInputValue[i] = tds[i].value; // 获取 input 元素的值
    }
    //给用户输入的数据做验证，不要太离谱
    //编号部分 编号限定在1到999999之间的数字,可以重复。
    const idTest = /^[1-9][0-9]{0,5}$/;
    if (idTest.test(userInputValue[0])) {
      //编号通过！
      errorInputId.setAttribute("style", "display:none"); //隐藏编号报错
      //姓名部分 姓名限定在1到6位的英文字符，可以重复
      const nameTest = /^[a-zA-Z]{1,6}$/;
      if (nameTest.test(userInputValue[1])) {
        //姓名通过！
        errorInputName.setAttribute("style", "display:none"); //隐藏姓名报错
        //数值部分，因为最好不要套太多if 所以就一起验证了算了（，数值限定在1到99999的数字，可以重复
        const propertyTest = /^[1-9][0-9]{0,4}$/;
        let allValid = true; //定义allValid用于判断属性是否通过的循环验证
        for (let i = 2; i < userInputValue.length; i++) {
          if (!propertyTest.test(userInputValue[i])) {
            allValid = false; //allValid为false说明属性数组里有不符合规则的值
            break; //直接退出！！！！
          }
        }
        if (allValid) {
          //数值通过！
          errorInputProperty.setAttribute("style", "display:none"); //隐藏属性报错
          //创建标签用于插入tbody的下面
          const row = `<tr> 
                  <td>${userInputValue[0]}</td>
                  <td>${userInputValue[1]}</td>
                  <td name="upData">${userInputValue[2]}</td>
                  <td name="upData">${userInputValue[3]}</td>
                  <td name="upData">${userInputValue[4]}</td>
                  <td name="upData">${userInputValue[5]}</td>
                  <td name="upData">${userInputValue[6]}</td>
                  <td name="upData">${userInputValue[7]}</td>
                  <td class="delTrBtn1">踢出队伍</td>
                </tr>`;
          // 将新角色添加到队伍中
          var newRow = addNewTdArea.insertRow(); // 创建新行
          newRow.innerHTML = row;

          // 给新角色绑定修改功能
          setTdCilck();

          //给新角色绑定踢出功能
          var newDelTrBtn = newRow.querySelector(".delTrBtn1"); // 获取 "踢出队伍" 按钮
          newDelTrBtn.onclick = function () {
            // 给按钮添加点击事件监听器
            var confirmed = confirm("确定踢出这位角色吗？");
            if (confirmed) {
              // 如果用户点击了确定按 钮，则返回 alert("已踢出")
              addNewTdArea.deleteRow(newRow.rowIndex - 1); // 删除对应的行
              alert("已踢出");
              hideError();
            } else {
              // 如果用户点击了取消按钮，则返回 alert("这都不踢？")
              return alert("这都不踢？");
            }
          };
          //创建完角色后将用户输入置空 人性化设计
          for (var i = 0; i < tds.length; i++) {
            tds[i].value = "";
          }
        } else {
          errorInputProperty.setAttribute("style", "display:block"); //属性输入报错
        }
      } else {
        errorInputName.setAttribute("style", "display:block"); //姓名输入报错
      }
    } else {
      errorInputId.setAttribute("style", "display:block"); //编号输入报错
    }
  };
}
addTr(tds);


//删除模块

var trss = document.getElementsByClassName("delPower"); // 获取原始队伍里的两个角色的tr
var delTrBtn = document.getElementsByClassName("delTrBtn"); //获取原始队伍里的两个角色的踢出队伍操作
//给踢出队伍的tr绑定删除事件
function setTrDel() {
  for (let i = 0; i < delTrBtn.length; i++) {
    delTrBtn[i].onclick = function () {
      delTr(i);
    };
  }
}
setTrDel();
//删除函数本体
function delTr(i) {
  // 使用 confirm 函数弹出提示框
  var confirmed = confirm("确定踢出这位角色吗？");
  if (confirmed) {
    trss[i].remove(); //直接踢出当前点击的角色（移除它的tr）
    alert("已踢出");
    hideError();
  } else {
    alert("这都不踢？");
  }
  //重新绑定(这个地方搞半天了)
  setTrDel();
}

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

角色修改数值模块

JS功能模块分析

修改数值模块：

var upDatas = document.getElementsByName("upData");

// 给角色的数值模块添加事件绑定
function setTdCilck() {
  for (let i = 0; i < upDatas.length; i++) {
    upDatas[i].onclick = function () {
      updateTd(this);
    };
  }
}
setTdCilck();

//报错提示 升级版
const inputElement = document.getElementById("input-element");
const errorContainer = document.getElementById("errorAlter");
function showError() {
  errorContainer.classList.add("show");
}
function hideError() {
  errorContainer.classList.remove("show");
}

// 角色修改数值函数
function updateTd(newContent) {
  if (document.getElementsByClassName("active-input").length == 0) {
    var oldhtml = newContent.innerHTML;
    newContent.innerHTML = "";
    var newInput = document.createElement("input");
    newInput.setAttribute("class", "active-input");
    newInput.value = oldhtml;
    const reg = /^[1-9][0-9]{0,4}$/;
    newInput.onblur = function () {
      if (reg.test(this.value)) {
        newContent.innerHTML = this.value;
        hideError();
      } else {
        showError();
        newContent.innerHTML = oldhtml;
      }
    };
    newContent.appendChild(newInput);
  } else {
    return;
  }
}

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

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

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

添加角色模块：

//添加新角色模块

var trs = document.getElementsByTagName("tr"); //获取所有的tr元素
var tds = document.querySelectorAll(".inputContent input"); // 获取所有的 input 元素
var addNewTdArea = document.getElementById("addNewTdArea"); //获取tbody标签，以方便在它的后面添加子队员（tr）
var addTrBtn = document.getElementById("addTrBtn"); //获取确定招募队友的btn
var errorInputId = document.getElementById("errorInputId"); //获取编号报错的Div
var errorInputName = document.getElementById("errorInputName"); //获取姓名报错的Div
var errorInputProperty = document.getElementById("errorInputProperty"); //获取属性报错的Div
//添加角色函数
function addTr(tds) {
  //给招募队友按钮绑定事件
  addTrBtn.onclick = function () {
    var userInputValue = []; //定义空数组，用于保存用户输入的input里的值
    for (let i = 0; i < tds.length; i++) {
      userInputValue[i] = tds[i].value; // 获取 input 元素的值
    }
    //给用户输入的数据做验证，不要太离谱
    //编号部分 编号限定在1到999999之间的数字,可以重复。
    const idTest = /^[1-9][0-9]{0,5}$/;
    if (idTest.test(userInputValue[0])) {
      //编号通过！
      errorInputId.setAttribute("style", "display:none"); //隐藏编号报错
      //姓名部分 姓名限定在1到6位的英文字符，可以重复
      const nameTest = /^[a-zA-Z]{1,6}$/;
      if (nameTest.test(userInputValue[1])) {
        //姓名通过！
        errorInputName.setAttribute("style", "display:none"); //隐藏姓名报错
        //数值部分，因为最好不要套太多if 所以就一起验证了算了（，数值限定在1到99999的数字，可以重复
        const propertyTest = /^[1-9][0-9]{0,4}$/;
        let allValid = true; //定义allValid用于判断属性是否通过的循环验证
        for (let i = 2; i < userInputValue.length; i++) {
          if (!propertyTest.test(userInputValue[i])) {
            allValid = false; //allValid为false说明属性数组里有不符合规则的值
            break; //直接退出！！！！
          }
        }
        if (allValid) {
          //数值通过！
          errorInputProperty.setAttribute("style", "display:none"); //隐藏属性报错
          //创建标签用于插入tbody的下面
          const row = `<tr> 
                  <td>${userInputValue[0]}</td>
                  <td>${userInputValue[1]}</td>
                  <td name="upData">${userInputValue[2]}</td>
                  <td name="upData">${userInputValue[3]}</td>
                  <td name="upData">${userInputValue[4]}</td>
                  <td name="upData">${userInputValue[5]}</td>
                  <td name="upData">${userInputValue[6]}</td>
                  <td name="upData">${userInputValue[7]}</td>
                  <td class="delTrBtn1">踢出队伍</td>
                </tr>`;
          // 将新角色添加到队伍中
          var newRow = addNewTdArea.insertRow(); // 创建新行
          newRow.innerHTML = row;

          // 给新角色绑定修改功能
          setTdCilck();

          //给新角色绑定踢出功能
          var newDelTrBtn = newRow.querySelector(".delTrBtn1"); // 获取 "踢出队伍" 按钮
          newDelTrBtn.onclick = function () {
            // 给按钮添加点击事件监听器
            var confirmed = confirm("确定踢出这位角色吗？");
            if (confirmed) {
              // 如果用户点击了确定按 钮，则返回 alert("已踢出")
              addNewTdArea.deleteRow(newRow.rowIndex - 1); // 删除对应的行
              alert("已踢出");
              hideError();
            } else {
              // 如果用户点击了取消按钮，则返回 alert("这都不踢？")
              return alert("这都不踢？");
            }
          };
          //创建完角色后将用户输入置空 人性化设计
          for (var i = 0; i < tds.length; i++) {
            tds[i].value = "";
          }
        } else {
          errorInputProperty.setAttribute("style", "display:block"); //属性输入报错
        }
      } else {
        errorInputName.setAttribute("style", "display:block"); //姓名输入报错
      }
    } else {
      errorInputId.setAttribute("style", "display:block"); //编号输入报错
    }
  };
}
addTr(tds);

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

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

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

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

角色删除模块：

var trss = document.getElementsByClassName("delPower"); // 获取原始队伍里的两个角色的tr
var delTrBtn = document.getElementsByClassName("delTrBtn"); //获取原始队伍里的两个角色的踢出队伍操作
//给踢出队伍的tr绑定删除事件
function setTrDel() {
  for (let i = 0; i < delTrBtn.length; i++) {
    delTrBtn[i].onclick = function () {
      delTr(i);
    };
  }
}
setTrDel();
//删除函数本体
function delTr(i) {
  // 使用 confirm 函数弹出提示框
  var confirmed = confirm("确定踢出这位角色吗？");
  if (confirmed) {
    trss[i].remove(); //直接踢出当前点击的角色（移除它的tr）
    alert("已踢出");
    hideError();
  } else {
    alert("这都不踢？");
  }
  //重新绑定(这个地方搞半天了)
  setTrDel();
}

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

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

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

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

总结：

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

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

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

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

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

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

AkitoSang

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Web学习基础应用-可编辑表格

在本博客中，我们学习了基于Web技术的可编辑表格应用。通过使用JavaScript、HTML和CSS，我们成功实现了角色修改数值、添加新角色和删除角色的功能。通过角色修改数值模块，用户可以点击数值单元格，将其转换为可编辑状态，并更新数值。我们还加入了输入验证功能，确保用户输入的数值符合规定的范围。添加新角色模块允许用户输入角色的编号、姓名和数值，并将其添加到表格中。我们对用户输入进行了验证，以确保数据的准确性和合法性。删除模块允许用户从表格中踢出不需要的角色。
复制链接

扫一扫