在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接

简介: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接

需求说明:

在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接,使用 DOM 节点的删除操作将对应的行数据删除


在文本输入框中输入姓名、年龄、班级和手机号,并选择性别

点击“插入数据”按钮,将输入框中的数据插入到表格中,表格中的数据将增加一条

点击表格中每条数据后的“删除”超链接,将删除该条数据,表格中的数据将减少一条


54.png

实现思路:


在页面中绘制表格,并添加 4 条虚拟数据,在每条数据后使用超链接,并且添加超链接的点击事件

在页面中添加文本输入框和选项菜单,并提示用户输入,添加“插入数据”按钮,并添加点击事件

在“插入数据”按钮的事件处理函数中,使用 document 对象的 getElementById、getElementsByTagName等属性获取输入框的值

使用 createElement 创建元素,使用 innerHTML 为元素设置文本,使用 appendChild 将创建的元素添加到 table 中

在“删除”超链接的事件处理函数中,获取超链接的父节点 td,继续获取父节点 tr,再获取父节点 table,然后将 table 节点中的 tr 节点删除


实现代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <table border="1" id="tb">
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>班级</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>25</td>
        <td>软件1班</td>
        <td>138xxxx0987</td>
        <td><a href="#" onclick="del(this)">删除</a></td>
      </tr>
      <tr>
        <td>李四</td>
        <td>女</td>
        <td>24</td>
        <td>软件2班</td>
        <td>136xxxx8766</td>
        <td><a href="#" onclick="del(this)">删除</a></td>
      </tr>
      <tr>
        <td>王五</td>
        <td>男</td>
        <td>26</td>
        <td>计科1班</td>
        <td>199xxxx8867</td>
        <td><a href="#" onclick="del(this)">删除</a></td>
      </tr>
      <tr>
        <td>赵六</td>
        <td>女</td>
        <td>23</td>
        <td>计科2班</td>
        <td>188xxxx9965</td>
        <td><a href="#" onclick="del(this)">删除</a></td>
      </tr>
    </table>
    <p>
      <input type="text" id="name" placeholder="请输入姓名"/>
      <select>
        <option>男</option>
        <option>女</option>
      </select>
      <input type="text" id="age" placeholder="请输入年龄" />
      <input type="text" id="cls" placeholder="请输入班级" />
      <input type="text" id="mobile" placeholder="请输入手机号" />
      <input type="button" value="插入数据" onClick="insert()" />
    </p>
    <script type="text/javascript">
      function insert(){
        var sel=document.getElementsByTagName("select")[0];
        var gender=sel.options[sel.selectedIndex].text;
        var age=document.getElementById("age").value;
        var cls=document.getElementById("cls").value;
        var mobile=document.getElementById("mobile").value;
        var name=document.getElementById("name").value;
        var arrays=new Array(name,gender,age,cls,mobile);
        var tb=document.getElementById("tb");
        var cols=tb.getElementsByTagName("th");
        var newtr=document.createElement("tr");
        for (var i=0;i<cols.length;i++) {
          if(i==cols.length-1) {
            var td=document.createElement("td");
            var a=document.createElement("a");
            a.innerHTML="删除";
            a.onclick=function(){
              a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
            }
            a.setAttribute("href","#");
            td.appendChild(a);
            newtr.appendChild(td);
          }else{
            var td=document.createElement("td");
            td.innerHTML=arrays[i];
            newtr.appendChild(td);
          }
        }
        tb.appendChild(newtr);
        console.log(newtr)
      }
      function del(obj){
        var tr=obj.parentNode.parentNode;
        if (tr!=null) {
          tr.parentNode.removeChild(tr);
        }
      }
    </script>
  </body>
</html>
相关文章
|
4天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
3天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
7天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
5天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
7天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
6天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
8天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
9天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
2天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树