广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现动态表格的方法详解
  • 905

0
分享到

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

2024-04-02 19:04:59 905人浏览 安东尼
摘要

目录javascript实现动态表格基本效果如下代码如下：第一种方式（较简单，建议使用）方式二改进版代码如下：总结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>

总结

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

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

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript实现动态表格的方法详解

本文链接: https://www.lsjlt.com/news/163462.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

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

下载Word文档
去做题
猜你喜欢
  • JavaScript实现动态表格的方法详解
    目录JavaScript实现动态表格基本效果如下代码如下：第一种方式（较简单，建议使用）方式二改进版代码如下：总结JavaScript实现动态表格 （改建版，代码见最下面） 基本效...
    99+
    2022-11-13
  • JavaScript实现生成动态表格和动态效果的方法详解
    今天上午完成了Vue实现一个表格的动态样式，那么JavaScript代码能不能实现同样的效果呢？这样也可以学习一下JavaScript的语法，晚上试了一下，完全可以，效果一模一样。 ...
    99+
    2022-11-13
  • JavaScript实现动态生成表格案例详解
    目录前言实现思路实现代码 实现效果前言 在这里实现一个动态添加表格的案例，当点击添加按钮时，可以弹出一个表单，然后将输入的内容添加到表格中，也可以将表格中的整行内容清除。 实现思路 ...
    99+
    2022-11-12
  • javascript动态生成表格详解
    *创建一个页面：两个输入框和一个按钮 *代码和步骤 代码如下: <html > <head> <title>动态生成表格<...
    99+
    2022-11-12
  • Vue3实现动态导入Excel表格数据的方法详解
    目录1.  前言2.  如何实现2.1使用技术2.2实现思路2.3具体实现方案1.  前言 在开发工作过程中，我们会遇到各种各样的表格数据导入，大部分我...
    99+
    2022-11-16
    Vue 动态导入Excel数据 Vue 导入Excel数据 Vue Excel 数据
  • JavaScript实现动态表格效果
    本文实例为大家分享了JavaScript实现动态表格效果的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html lang="...
    99+
    2022-11-12
  • JavaScript实现表格动态变色
    本文实例为大家分享了JavaScript实现表格动态变色的具体代码，供大家参考，具体内容如下 表格分为：表头、表格主体 两部分 当移动到表格主体的行时，移动到哪一行，哪一行就变化颜色...
    99+
    2022-11-12
  • JavaScript怎么实现动态表格
    JavaScript怎么实现动态表格，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。JavaScript实现动态表格（改建版，代码见最下面）基本效果如下点击添加，...
    99+
    2023-06-28
  • JavaScript实现动态加载删除表格
    本文实例为大家分享了JavaScript实现动态加载删除表格的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html lang...
    99+
    2022-11-12
  • JavaScript如何实现动态生成表格
    这篇文章给大家分享的是有关JavaScript如何实现动态生成表格的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。前言在这里实现一个动态添加表格的案例，当点击添加按钮时，可以弹出一个表单，然后将输入的内容添加到表格...
    99+
    2023-06-22
  • Vue树表格分页的实现方法详解
    目录1. 准备工作2. 动态树2.1 在配置请求路径2.2 使用动态数据构建导航菜单2.2.1 通过接口获取数据2.2.2 通过后台获取的数据构建菜单导航2.3 点击菜单实现路由跳转...
    99+
    2022-11-13
    Vue树表格 Vue树表格分页 Vue表格分页
  • javascript实现删除表格的方法
    这篇文章主要介绍javascript实现删除表格的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！javascript实现删除表格的方法：首先创建节点；然后移除table下面的子节点tr，删除表格的行，代码为【ta...
    99+
    2023-06-14
  • python实现读取excel表格详解方法
    目录一、python读取excel表格数据1、读取excel表格数据常用操作2、xlrd模块主要操作3、读取单元格内容为日期时间的方式4、读取合并单元格的数据二、python写入ex...
    99+
    2022-11-11
  • JavaScript怎么实现生成动态表格和动态效果
    本篇内容介绍了“JavaScript怎么实现生成动态表格和动态效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！代码：<!DOCTYP...
    99+
    2023-06-29
  • SpringSecurity动态权限的实现方法详解
    目录1. 动态管理权限规则1.1 数据库设计1.2 实战2. 测试最近在做 TienChin 项目，用的是 RuoYi-Vue 脚手架，在这个脚手架中，访问某个接口需要什么权限，这个...
    99+
    2022-11-13
  • JavaScript如何实现动态加载删除表格
    这篇文章将为大家详细讲解有关JavaScript如何实现动态加载删除表格，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下代码：<!DOCTYPE html><html...
    99+
    2023-06-14
  • C#实现从PDF中提取表格的方法详解
    目录程序环境从PDF中提取表格具体步骤完整代码PDF是办公中比较常见的一种文件格式，在工作中应用也越来越普遍。由于PDF文件集成度和安全可靠性都较高，所以在PDF中编辑内容是一件比较...
    99+
    2022-11-13
    C# PDF提取表格 C# PDF 表格
  • 利用Vue3实现可复制表格的方法详解
    目录前言最基础的表格封装实现复制功能处理表格中的不可复制元素测试前言 表格是前端非常常用的一个控件，但是每次都使用v-for指令手动绘制tr/th/td这些元素是非常麻烦的。同时，基...
    99+
    2022-12-12
    Vue3实现可复制表格 Vue 可复制表格 Vue3 表格
  • 详解Spring中实现接口动态的解决方法
    前言本文主要给大家介绍的是关于Spring实现接口动态的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看详细的介绍吧。关于这个问题是因为领导最近跟我提了一个需求，是有关于实现类Mybatis的@Select、@Insert注解的功...
    99+
    2023-05-31
    spring 动态接口 动
  • Android拼接实现动态对象方法详解
    目录1. 前言2. 动态选密钥3. 换肤上的使用4. 总结1. 前言 我们往往有些配置文件，当项目大的时候，一些配置文件或者一些判断逻辑就会变得复杂，会出现很多判断语句，我在想，能...
    99+
    2023-03-01
    Android拼接动态对象 Android 动态对象
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作