我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

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

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>

总结

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

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

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

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

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

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

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

2024-04-02

JavaScript实现生成动态表格和动态效果的方法详解

2024-04-02

JavaScript实现动态生成表格案例详解

2024-04-02

javascript动态生成表格详解

2024-04-02

Vue3实现动态导入Excel表格数据的方法详解

在开发工作过程中，我们会遇到各种各样的表格数据导入，动态数据导入可以减少人为操作，减少出错。本文为大家介绍了Vue3实现动态导入Excel表格数据的方法，需要的可以参考一下
2022-11-16

JavaScript实现动态表格效果

2024-04-02

JavaScript实现表格动态变色

2024-04-02

JavaScript怎么实现动态表格

JavaScript怎么实现动态表格，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。JavaScript实现动态表格（改建版，代码见最下面）基本效果如下点击添加，
2023-06-28

JavaScript实现动态加载删除表格

2024-04-02

JavaScript如何实现动态生成表格

这篇文章给大家分享的是有关JavaScript如何实现动态生成表格的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。前言在这里实现一个动态添加表格的案例，当点击添加按钮时，可以弹出一个表单，然后将输入的内容添加到表格
2023-06-22

JavaScript怎么实现生成动态表格和动态效果

本篇内容介绍了“JavaScript怎么实现生成动态表格和动态效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！代码：
2023-06-29

javascript实现删除表格的方法

这篇文章主要介绍javascript实现删除表格的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！javascript实现删除表格的方法：首先创建节点；然后移除table下面的子节点tr，删除表格的行，代码为【ta
2023-06-14

JavaScript如何实现动态加载删除表格

这篇文章将为大家详细讲解有关JavaScript如何实现动态加载删除表格，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下代码：
2023-06-14

SpringSecurity动态权限的实现方法详解

2024-04-02

Vue树表格分页的实现方法详解

这篇文章主要介绍了Vue树表格分页的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-11-13

python实现读取excel表格详解方法

2024-04-02

javascript动态分页的实现方法实例

2024-04-02

详解Spring中实现接口动态的解决方法

前言本文主要给大家介绍的是关于Spring实现接口动态的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看详细的介绍吧。关于这个问题是因为领导最近跟我提了一个需求，是有关于实现类Mybatis的@Select、@Insert注解的功
2023-05-31

mybatis-plus动态表名实现方法

2024-04-02

利用Vue3实现可复制表格的方法详解

表格是前端非常常用的一个控件，本文主要为大家介绍了Vue3如何实现一个简易的可以复制的表格，文中的示例代码讲解详细，需要的可以参考一下
2022-12-12

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈