js Dom编程 动态添加和删除表格行

js Dom编程 动态添加和删除表格行

要求：制作一个表格，能够动态添加和删除学生信息
1）能够在表格末尾添加一行学生信息
2）能够删除选中的一行学生信息

步骤：
1）写一个js函数能够动态添加表格的信息
2）写一个js函数能够删除当前所选的行信息

首先，我们先把表头创建好

<table id="tab" border="1" width="960px" align="center">
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>

    <tbody>
    </tbody>

</table>

tbody标签用于之后动态生成新的表格行

然后，创建一个按钮，用于生成新的行

<div id="btn" align="center">
    <input id="addBtn" type="button" value="添加一行" name="btn" onclick="add()">
  </div>

写添加行信息的函数

function add() {
      var editTable = document.getElementById("tbody");
      var tr = document.createElement("tr");
      editTable.appendChild(tr);
      var td1 = document.createElement("td");
      td1.innerHTML = "xh00" + i;
      var td2 = document.createElement("td");
      td2.innerHTML = "第" + (i+1) + "学生";
      var td3 = document.createElement("td");
      td3.innerHTML = "<a href=# onclick='del(this)'>删除</a>";
      tr.appendChild(td1);
      tr.appendChild(td2);
      tr.appendChild(td3);
      i++;
    }

前面要定义数字型变量i，用于显示每行学生序数

定义删除指定行的函数

function del(obj) {
      var tr = obj.parentNode.parentNode;
      var tbody = tr.parentNode;
      tbody.removeChild(tr);
    }

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
      #btn{
        margin-top: 100px;
      }
      #addBtn{
        width: 80px;
        height: 60px;
      }
    </style>
</head>
<body>
  <table id="tab" border="1" width="960px" align="center">
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
    <tbody id = "tbody">

    </tbody>
  </table>
  <div id="btn" align="center">
    <input id="addBtn" type="button" value="添加一行" name="btn" onclick="add()">
  </div>
  <script>
    var i = 0;
    function del(obj) {
      var tr = obj.parentNode.parentNode;
      var tbody = tr.parentNode;
      tbody.removeChild(tr);
    }
    function add() {
      var editTable = document.getElementById("tbody");
      var tr = document.createElement("tr");
      editTable.appendChild(tr);
      var td1 = document.createElement("td");
      td1.innerHTML = "xh00" + i;
      var td2 = document.createElement("td");
      td2.innerHTML = "第" + (i+1) + "学生";
      var td3 = document.createElement("td");
      td3.innerHTML = "<a href=# onclick='del(this)'>删除</a>";
      tr.appendChild(td1);
      tr.appendChild(td2);
      tr.appendChild(td3);
      i++;
    }
  </script>
</body>
</html>

实现效果：

posted @ 2020-10-13 17:51  TidalCoast  阅读(705)  评论(0)  编辑  收藏  举报