HTML动态表格实现，对其进行增删改查操作，超牛逼

@程序员ALMJ

已于 2025-04-03 18:03:37 修改

阅读量434

点赞数 9

文章标签： html css 前端

于 2025-03-27 00:18:44 首次发布

本文链接：https://blog.csdn.net/aA20030316/article/details/146544780

版权

1.首先看一下效果

核心功能

这个代码实现了一个动态的学生信息表格管理，主要功能包括：

显示初始的学生信息表格
可以双击表格进入编辑模式
通过表单添加新的学生信息
删除已有的学生信息行

主要要点

HTML结构：
- 创建了一个包含输入表单的div区域
- 构建了一个基本的学生信息表格
CSS样式：
- 设置了表格和单元格的边框样式
- 居中对齐了表格和内容
JavaScript功能：（也是最牛逼的一点哦）
- 添加新行功能
- 删除行功能
- 表格编辑功能
- 显示/隐藏输入表单

重要代码片段

表格编辑功能：

document.getElementById("ta").ondblclick=function(){
    this.contentEditable=true;
}
document.getElementById("ta").onblur=function(){
    this.contentEditable=false;
}

2.添加新行功能

document.getElementById("btn_add").onclick = function () {
    var id = document.getElementById("id").value;
    var name = document.getElementById("name").value;
    var gender = document.getElementById("gender").value;
    var table = document.getElementsByTagName("table")[0];
    table.innerHTML += ` <tr>...</tr>`;
};

3.删除行功能

function deleteTr(object) {
    var table = object.parentNode.parentNode.parentNode;
    var tr = object.parentNode.parentNode;
    var v=confirm("确定删除？");
    if(v==true){
        table.removeChild(tr);
    }
}

学习价值

DOM操作：
- 学习如何获取和操作HTML元素
- 理解parentNode的层级关系
事件处理：
- onclick事件的应用（单击事件）
- ondblclick事件的应用（双击事件）
- onblur事件的应用（失去焦点事件）
动态内容管理：
- 使用innerHTML动态添加内容
- 使用removeChild删除元素
用户交互：
- 确认对话框的使用(confirm)
- 简单的表单验证
可编辑内容：
- contentEditable属性的使用，这个属性非常牛逼，可以让HTML页面改成可编辑的

总代码：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>动态表格</title>
 <style>
      table {
        border: 1px solid;
        margin: auto;
        width: 500px;
      }
 
      td,
      th {
        text-align: center;
        border: 1px solid;
      }
      div {
        text-align: center;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <!-- 创建一个div块标签，在该块标签中添加三个输入信息（编号、姓名、性别）的框框、一个确认添加的按钮（添加）-->
    <div id="div">
      <input type="text" id="id" placeholder="请输入编号" />
      <input type="text" id="name" placeholder="请输入姓名" />
      <input type="text" id="gender" placeholder="请输入性别" />
      <input type="button" value="添加" id="btn_add"/>
	  <input type="button" value="完成" id="wan"/>
    </div>
 
    <table id="ta">
      <!-- 表格标题 -->
      <caption>
        学生信息表
      </caption>
      <!-- 表格第一行：表格表头 -->
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th><a href="#" onClick="cao()" style="color:#000000;">操作</a></th>
      </tr>
 
      <!-- 表格第二行：学生信息2 -->
      <tr>
        <td>1</td>
        <td>小明</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="#;" onClick="deleteTr(this);">删除</a></td>
      </tr>
 
      <!-- 表格第三行：学生信息2 -->
      <tr>
        <td>2</td>
        <td>小红</td>
        <td>男</td>
        <!-- 在该单元格中创建一个链接标签，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="#;" onClick="deleteTr(this);">删除</a></td>
      </tr>
 
      <!-- 表格第四行：学生信息3 -->
      <tr>
        <td>3</td>
        <td>小兰</td>
        <td>女</td>
        <!-- 在该单元格中创建一个链接标签，通过onclick事件(鼠标点击)属性来删除信息行-->
        <td><a href="#;" onClick="deleteTr(this);">删除</a></td>
      </tr>
    </table>
<script>
 document.getElementById("ta").ondblclick=function(){
				  this.contentEditable=true;
				  }
				  
				  document.getElementById("ta").onblur=function(){
				  this.contentEditable=false;
				  }
function cao(){
			document.getElementById("div").style.display="block";

}
            document.getElementById("wan").onclick=function(){
			document.getElementById("div").style.display="none";
			
			}
      // 使用innerHTML添加
      document.getElementById("btn_add").onclick = function () {
        // 获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
 
        // 获取table
        var table = document.getElementsByTagName("table")[0];
		
                
				  

        // 追加一行
 
        table.innerHTML += ` <tr>
            <td>${id}</td>
            <td>${name}</td>
            <td>${gender}</td>
            <td><a href="#"; onclick="deleteTr(this);">删除</a></td>
            </tr>`;
      };
 
      // 删除方法
      function deleteTr(object) {
        // 获取table节点
        var table = object.parentNode.parentNode.parentNode;
        // 获取tr节点
        var tr = object.parentNode.parentNode;
        // 删除（并返回）当前节点的指定子节点。
		var v=confirm("确定删除？");
		if(v==true){
        table.removeChild(tr);
		}
      }
    </script>
</body>
</html>