动态删除和添加表格的代码

下雪不过冬天

已于 2022-01-25 10:28:41 修改

阅读量122

点赞数 1

文章标签： javascript 前端 html

于 2021-05-22 10:58:23 首次发布

本文链接：https://blog.csdn.net/m0_56232007/article/details/116235126

版权

动态删除和添加表格

代码如下：

<!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{
      width: 400px;
      margin: 30px;
      text-align: center;
      font-size: 20px;
      margin: 0 auto;
    }
    td,th{
      width: 100px;
      height: 50px;
    }
    tbody tr:nth-child(odd){
      background-color: #e67e22;
    }
    tbody tr:nth-child(even){
      background-color: #e74c3c;
    }
    thead tr{
      background-color: #34495e;
      color: #fff;
    }
    form{
      width: 400px;
      margin: 30px auto;
      text-align: center;
      padding: 30px;
      border: 10px solid skyblue;
    }
    form input{
      margin: 10px;
      height: 30px;
      width: 240px;
    }
    form>button{
      width: 100%;
      height: 40px;
      margin-top: 20px;
      font-size: 24px;
    }
    .del{
      cursor: pointer;
    }
  </style>
</head>
<body>
  <form>
    名称：<input type="text" name="heroName"><br>
    称号：<input type="text" name="nickName"><br>
    位置：<input type="text" name="pos"><br>
    <button id="btn" type="button">提交</button>
  </form>
  <table cellspacing = "0">
    <thead>
      <tr>
        <th>名称</th>
        <th>称号</th>
        <th>位置</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>
          <button class="del">删除</button>
        </td>
      </tr> -->
    </tbody>
  </table>
  <script>
    // 1.获取等下要用到的元素节点
    var heroName = document.getElementsByName("heroName")[0];
    var nickName = document.getElementsByName("nickName")[0];
    var pos = document.getElementsByName("pos")[0];
    var tbody = document.getElementsByTagName("tbody")[0];
    // 获取提交按钮，为它绑定点击事件，点击的时候要获取用户输入的信息。
    var btn = document.getElementById("btn");

    btn.onclick = function(){
      // 阻止浏览器默认事件 比如:表单会自动提交。
      // ev.preventDefault();
      // 添加非空验证
      if(heroName.value.length==0||nickName.value.length==0||pos.value.length==0){
        alert("请完整输入信息！")
        return;
      }
      // 要往td中添加的内容
      var arr = [heroName.value,nickName.value,pos.value]

      // 创建一个tr 单元行
      var tr = document.createElement("tr");
      // 补充单元行的内容
        //内容有多少个，就创建多少个td
      for (var i = 0; i < arr.length; i++) {
        // 创建一个td
        var td = document.createElement("td");
        td.innerHTML = arr[i]
        tr.appendChild(td);
      }
      // 创建一个带删除按钮的单元格
      var delTd = document.createElement("td");
      // 创建一个按钮
      var del = document.createElement("button");
      // 填充按钮的内容
      del.innerHTML = "删除";
      // 给按钮添加一个类名
      del.classList.add("del");
      delTd.appendChild(del);
      tr.appendChild(delTd);
      // 把单元行插入到tbody中
      tbody.appendChild(tr);

      // 给按钮添加一个点击事件。
      del.onclick = function(){
        // 在事件函数中，this指向事件源，在点击事件中。点击了谁，this就是谁。
        this.parentNode.parentNode.remove();
      }

      // 清空form中的input内容
      heroName.value = "";
      nickName.value = "";
      pos.value = "";
    }
  </script>
</body>
</html>

效果图如下：
在这里插入图片描述

下雪不过冬天

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态删除和添加表格的代码

动态删除和添加表格代码如下：<!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"> <titl
复制链接

扫一扫