JavaScript实现动态表格的方法详解

2024-12-04 10:09:12

JavaScript实现动态表格

（改建版，代码见最下面）

基本效果如下

点击添加，可以将输入框中的值，新增到表格中；点击删除可以删除本行内容。

代码如下：

第一种方式（较简单，建议使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格02</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>
    <input type="text" id="id" placeholder="请输入id值">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" id="btn_add" value="添加">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>id号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>001</td>
        <td>小燕子</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>002</td>
        <td>紫薇</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>003</td>
        <td>永琪</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>004</td>
        <td>尔康</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>
<script>
    //使用innerHTML给添加按钮绑定事件
    var element = document.getElementById("btn_add");
    element.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=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td></tr>";
    }
    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格02</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>
    <input type="text" id="id" placeholder="请输入id值">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" id="btn_add" value="添加">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>id号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>001</td>
        <td>小燕子</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>002</td>
        <td>紫薇</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>003</td>
        <td>永琪</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>004</td>
        <td>尔康</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>
<script>
    //使用innerHTML给添加按钮绑定事件
    var element = document.getElementById("btn_add");
    element.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=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td></tr>";
    }
    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>

简单解释

删除的事件绑定在table表格中，注意看！

方式二

只需要在上述基础上，修改

<script>
        //给添加按钮绑定事件
        var element = document.getElementById("btn_add");
        element.onclick=function() {
            //获取文本框的内容
            var id = document.getElementById("id").value;
            var name=document.getElementById("name").value;
            var gender=document.getElementById("gender").value;
            //在创建一行表格
            var td_id = document.createElement("td");
            var td_name = document.createElement("td");
            var td_gender = document.createElement("td");
            var td_a = document.createElement("td");
            var ele_a=document.createElement("a");
            var text_id = document.createTextNode(id);
            td_id.appendChild(text_id);
            var name_id = document.createTextNode(name);
            td_name.appendChild(name_id);
            var gender_id = document.createTextNode(gender);
            td_gender.appendChild(gender_id);
            //设置属性值
            ele_a.setAttribute("href","javascript:void(0);");
            ele_a.setAttribute("onclick","delTr(this);");
            var text_a=document.createTextNode("删除");
            ele_a.appendChild(text_a);
            td_a.appendChild(ele_a);
            var tr = document.createElement("tr");
            //添加td到tr中
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_gender);
            tr.appendChild(td_a);
            //获取table
            var table = document.getElementsByTagName("table")[0];
            table.appendChild(tr);
        }
        //删除方法
        function delTr(obj){
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    </script>

简单解释

改进版

又加了一些新功能：鼠标悬停变色，全选，全不选，反选。

效果：框框可以选中，可以全选，可以全不选，可以反选。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格02</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="请输入id值">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" id="btn_add" value="添加">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>id号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb" ></td>
        <td>001</td>
        <td>小燕子</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb" ></td>
        <td>002</td>
        <td>紫薇</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb" ></td>
        <td>003</td>
        <td>永琪</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb" ></td>
        <td>004</td>
        <td>尔康</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
<script>
    //使用innerHTML给添加按钮绑定事件
    var element = document.getElementById("btn_add");
    element.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><input type=\"checkbox\" name=\"cb\" ></td>"+"<td>"+id+"</td><td>"+name+"</td><td>"+gender+"</td><td>"
            +"<a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td></tr>";
    }
    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }

    //给前边的选不选添加事件
    //1.在页面加载完后绑定事件
    window.onload=function(){
        //给全选按钮绑定单击事件
        document.getElementById("selectAll").onclick=function(){
            //获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            for(var i=0;i<cbs.length;i++){
                cbs[i].checked=true;
            }
        }
        //全部选按钮绑定事件
        document.getElementById("unSelectAll").onclick=function(){
            var cbs = document.getElementsByName("cb");
            for(var i = 0; i < cbs.length; i++){
                cbs[i].checked=false;
            }
        }
        //反选按钮绑定事件
        document.getElementById("selectRev").onclick = function(){
            //反选
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                //设置每一个cb的状态为相反
                cbs[i].checked = !cbs[i].checked;
            }
        }
        //第一个的点击事件
        document.getElementById("firstCb").onclick = function(){
            var cbs = document.getElementsByName("cb");
            //alert("被点击了");
            //console.log(cbs);
            for (var i = 1; i < cbs.length; i++) {
                //设置每一个cb的状态和第一个cb的状态一样
                cbs[i].checked = this.checked;
            }
        }
        //给所有tr绑定鼠标移到元素之上和移出元素事件
        var trs = document.getElementsByTagName("tr");
        //遍历
        for (var i = 0; i < trs.length; i++) {
            //移到元素之上
            trs[i].onmouseover = function(){
                this.className = "over";
            }
            //移出元素
            trs[i].onmouseout = function(){
                this.className = "out";
            }
        }
    }
</script>
</body>
</html>

总结

最后这个代码还有点问题，点击最上边的框框可以全选或者都不选所有。但是当新增几行之后，这个功能就实现不了了。

新增几行之后，鼠标的悬停变色也不能实现了。

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

JS实现动态表格的添加，修改，删除功能(推荐)

1. 首先在页面中配置好一个表格框架 <tr> <td>新增参数:</td> <td class="pn-fcontent"><input type="button" value="选择" onclick="openAppParamsPage();"/></td> <td>参数列表:</td> <td class="
JavaScript实现简单动态表格

本文实例为大家分享了JavaScript实现简单动态表格的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500p
JavaScript实现动态表格效果

本文实例为大家分享了JavaScript实现动态表格效果的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> .bigDiv{ width: 600px; margin: 50px auto; } table{
JavaScript实现动态表格的方法详解

目录 JavaScript实现动态表格基本效果如下代码如下: 第一种方式(较简单,建议使用) 方式二改进版代码如下: 总结 JavaScript实现动态表格 (改建版,代码见最下面) 基本效果如下点击添加,可以将输入框中的值,新增到表格中:点击删除可以删除本行内容. 代码如下: 第一种方式(较简单,建议使用) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
JavaScript数组排序reverse()和sort()方法详解

JavaScript中数组排序的方法有两个reverse()和sort(). reverse()方法会反转数组项的顺序: var arr = [1,2,3,4,5]; arr.reverse(); alert(arr); //5,4,3,2,1 sort()方法会按照字符串升序排列数组项,sort()方法会调用每个数组项的tostring()方法,即使数组中的每一项都是数值,sort()方法比较的也是字符串: var arr = [1,2,11,15,5]; arr.sort(); alert(
利用JavaScript获取用户IP属地方法详解

目录写在前面尝试一:navigator.geolocation 尝试二:sohu 的接口尝试三:百度地图的接口写在后面写在前面想要像一些平台那样显示用户的位置信息,例如某省市那样.那么这是如何做到的, 据说这个位置信息的准确性在通信网络运营商那里?先不管,先实践尝试下能不能获取. 尝试一:navigator.geolocation 尝试了使用 navigator.geolocation,但未能成功拿到信息. getGeolocation(){ if ('geolocation' in
Java实现添加条形码到PDF表格的方法详解

目录程序环境代码示例条码的应用已深入生活和工作的方方面面.在处理条码时,常需要和各种文档格式相结合.当需要在文档中插入.编辑或者删除条码时,可借助于一些专业的类库工具来实现.本文,以操作PDF文件为例,介绍如何在编辑表格时,向单元格中添加条形码. 程序环境本次功能测试中,使用 Free Spire.PDF for Java. 实现功能的大致思路:生成条形码,将条形码保存为图片,然后在PDF中的表格单元格中插入条码图片. Spire.PDF for Java 中的Spire.Pdf.Bar
SpringBoot设置动态定时任务的方法详解

之前写过文章记录怎么在SpringBoot项目中简单使用定时任务,不过由于要借助cron表达式且都提前定义好放在配置文件里,不能在项目运行中动态修改任务执行时间,实在不太灵活. 经过网上搜索学习后,特此记录如何在SpringBoot项目中实现动态定时任务. 因为只是一个demo,所以只引入了需要的依赖: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <ar
C#实现从PDF中提取表格的方法详解

目录程序环境从PDF中提取表格具体步骤完整代码 PDF是办公中比较常见的一种文件格式,在工作中应用也越来越普遍.由于PDF文件集成度和安全可靠性都较高,所以在PDF中编辑内容是一件比较复杂且困难的事.但有时因工作需要,要求我们从中提取数据或表格该怎么办呢?别担心,今天为大家介绍一种通过C#/VB.NET代码从PDF中提取表格内容的方法.下面是我整理的思路步骤及代码供大家参考. 程序环境本次测试时,在程序中引入 Spire.PDF.dll 文件. 方法1: 将 Free Spire.
利用Vue3实现可复制表格的方法详解

目录前言最基础的表格封装实现复制功能处理表格中的不可复制元素测试前言表格是前端非常常用的一个控件,但是每次都使用v-for指令手动绘制tr/th/td这些元素是非常麻烦的.同时,基础的 table 样式通常也是不满足需求的,因此一个好的表格封装就显得比较重要了. 最基础的表格封装最基础基础的表格封装所要做的事情就是让用户只关注行和列的数据,而不需要关注 DOM 结构是怎样的,我们可以参考 AntDesign,columns dataSource 这两个属性是必不可少的,代码如下:
js显示动态时间的方法详解

本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的
JavaScript实现五子棋游戏的方法详解

本文实例讲述了JavaScript实现五子棋游戏的方法.分享给大家供大家参考,具体如下: 最近半个月一直在看深入的学习JavaScript,里面有很多重点和难点,比如闭包.词法分析.面向对象等.今天给大家分享一个由JavaScript编写的五子棋游戏,主要用到JavaScript的面向对象.事件委托.闭包等知识,还是挺有分量的,正好可以检测学习的成果. 老规矩,先上图,再说话. 效果图: 五子棋素材图: 代码: <!DOCTYPE html> <html> <head>
JS获取动态添加元素的方法详解

本文实例讲述了JS获取动态添加元素的方法.分享给大家供大家参考,具体如下: 在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: 1. 在模板引擎里面添加行内事件 2. 利用事件的委托获取(常用) 3. 在ajax的监听响应完成函数后面获取一在模板引擎里面添加行内事件添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素.  <script id=&q