JavaScript DOM的增、删操作，并实时显示到表格中（JS代码含详细注释）

最新推荐文章于 2023-07-14 21:35:34 发布

小小前端_可笑可笑

最新推荐文章于 2023-07-14 21:35:34 发布

阅读量355

点赞数

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

本文链接：https://blog.csdn.net/weixin_44901846/article/details/106315554

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

JavaScript DOM的增、删操作，并实时显示到表格中

一、说明

给所有的a标签绑定事件
判断点击的del属于哪一行数据
删除当前行的tr节点
获取添加表中的所有input数据
添加tr和td节点
向新建的td节点中添加数据（数据来源与4.）
给新建的行中的a标签绑定事件

二、实现代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 去除默认样式 */
    *{
      margin: 0;
      padding: 0;
    }
    .myTable{
      text-align: center;
      margin: 20px auto;
      padding: 20px;
    }
  </style>
  <script>
  	window.onload = function() {  // 页面加载完之后加载js代码
	    function myOnclick() {  // 设置一个添加a标签onclick快速绑定事件的function
	      var As = document.getElementsByTagName("a");
	      for(var i = 0; i < As.length; i++) {
	        As[i].onclick = function() {
	          var name = this.parentNode.parentNode.children[0].innerHTML;
	          if(confirm("确认删除"+ name +"吗？")) {
	            this.parentNode.parentNode.remove();
	          }
	        }
	      }
	    }
	
	    myOnclick();  // 给所有a标签绑定onclick事件
	    var table = document.getElementById("table"); // 获取第一个表格table标签节点
	    var inputs = document.getElementsByTagName("input");  // 获取第二个表格的所有input标签节点
	    var btn = document.getElementById("btn"); // 获取添加button节点
	    btn.onclick = function() {  // 给添加button帮点onclick事件
	      confirm("确认添加吗?"); // 跳出弹框，与alert区别是可选择是与否
	      var tr = document.createElement("tr");  // 创建一个tr节点元素
	      for(var i = 0; i < inputs.length; i++) {  // 获取所有输入并且插入innerHTML
	        tr.innerHTML += "<td>" + inputs[i].value + "</td>"
	      }
	      tr.innerHTML += "<td><a href='javascript:;'>del</a></td>" // 添加一个操作标签
	      table.appendChild(tr);  // 添加到当前tr的子节点尾部
	      myOnclick();  // 重新给当前a标签绑定onclick事件   注：这里可改进
	    }
      }
  </script>
</head>
<body>
  <table class="myTable" border="1px" id="table">
    <tr>
      <th>姓名</th><th>班级</th><th>学号</th><th>操作</th>
    </tr>
    <tr>
      <td>1</td><td>1</td><td>1</td>
      <td><a href="javascript:;">del</a></td>
    </tr>
    <tr>
      <td>2</td><td>2</td><td>2</td>
      <td><a href="javascript:;">del</a></td>
    </tr>
    <tr>
      <td>3</td><td>3</td><td>3</td>
      <td><a href="javascript:;">del</a></td>
    </tr>
  </table>

  <table class="myTable" border="1px">
    <tr><td colspan="2">添加</td></tr>
    <tr>
      <td>姓名</td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>班级</td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>学号</td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <!-- 占两列 -->
      <td colspan="2">  
        <button id="btn">添加</button>
      </td>
    </tr>
  </table>
  
</body>
</html>

三、一点备注

粘贴到html文件中即可运行。
在添加事件中有可改进的地方，可以自己尝试。

小小前端_可笑可笑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM的增、删操作，并实时显示到表格中（JS代码含详细注释）

JavaScript DOM的增、删操作，并实时显示到表格中一、说明二、实现代码三、一点备注一、说明给所有的a标签绑定事件判断点击的del属于哪一行数据删除当前行的tr节点获取添加表中的所有input数据添加tr和td节点向新建的td节点中添加数据（数据来源与4.）给新建的行中的a标签绑定事件二、实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫