JavaScript练习（一）——DOM增删改

最新推荐文章于 2024-09-26 01:42:12 发布

Starry577

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量146

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ttxwwdn/article/details/109907166

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加删除记录</title>
    <script>
      window.onload = function () {
        //删除tr的响应函数
        function delA() {
          var tr = this.parentNode.parentNode;
          var name = tr.getElementsByTagName("td")[0].innerHTML;
          //用于弹出一个带有确认和取消按钮的提示框
          var flag = confirm("确定要删除" + name + "信息吗？");
          console.log(confirm);
          //这里点谁，this就是谁
          // var tr = this.parentNode.parentNode;
          // console.log(tr);
          // var table = tr.parentNode;
          // table.removeChild(tr);
          if (flag == true) {
            tr.parentNode.removeChild(tr);
          }
          /*
              点击超链接后，超链接会跳转页面，这个是超链接的默认行为
              但是此时我们不希望出现默认行为，可以通过响应函数的最后 return false来取消默认行为
              或者herf="javascript:;"
            */
          return false;
        }
        var dels = document.getElementsByTagName("a");
        for (var i = 0; i < dels.length; i++) {
          dels[i].onclick = delA;
        }
        var sub = document.getElementById("submit");
        sub.onclick = function () {
          var name = document.getElementById("name").value;
          var email = document.getElementById("email").value;
          var salary = document.getElementById("salary").value;
          var newPer = document.getElementsByTagName("tbody")[0];
          var tr = document.createElement("tr");
          tr.innerHTML =
            "<td>" +
            name +
            "</td>" +
            "<td>" +
            email +
            "</td>" +
            "<td>" +
            salary +
            "</td>" +
            "<td>" +
            "<a href='javascript:;'>Delete</a>" +
            "</td>";
          var a = tr.getElementsByTagName("a")[0];
          a.onclick = delA;
          newPer.appendChild(tr);
        };
      };
    </script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .inner {
        width: 400px;
        height: 100%;
        margin: 100px auto;
      }
      .new {
        border: 1px solid #000;
        padding: 15px;
        margin-top: 50px;
      }
      table {
        width: 400px;
        text-align: center;
      }
      .new h3 {
        padding: 20px 0;
      }
      .new div {
        text-align: center;
      }
      .new form > input {
        width: 300px;
        float: right;
        outline: blue;
      }
    </style>
  </head>
  <body>
    <div class="inner">
      <table align="center" border="1" cellspacing="0" id="employeeTable">
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Salary</th>
          <th>&nbsp;</th>
        </tr>
        <tr>
          <td>Tom</td>
          <td>tom@tom.com</td>
          <td>5000</td>
          <td><a href="javascript:;">Delete</a></td>
        </tr>
      </table>
      <div class="new">
        <h3>添加新员工</h3>
        <form action="">
          name:<input type="text" id="name" /> email:<input
            type="text"
            name="email"
            id="email"
          />
          salary: <input type="text" name="salary" id="salary" />
          <div>
            <input type="button" name="submit" id="submit" value="提交" />
          </div>
        </form>
      </div>
    </div>
  </body>
</html>