Javascript实现动态表格

最新推荐文章于 2024-05-16 16:52:30 发布
最新推荐文章于 2024-05-16 16:52:30 发布
阅读量2.4k 收藏 18
点赞数 7
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44774255/article/details/109561691
版权

效果如下图：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

具体代码如下：

<!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>
        table{
            border: 1px solid rgb(45, 43, 201);
            margin:auto;
            width: 500px;
        }
        td,tr{
           text-align: center;
           border:1px solid; 
        }
        div{
            color: skyblue;
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btnadd">

    </div>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <td><b>编号</b></td>
            <td><b>姓名</b></td>
            <td><b>性别</b></td>
            <td><b>操作</b></td>
        </tr>
        <tr>
            <td>1</td>
            <td>Roxanne</td>
            <td>女</td>
            <td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Charles</td>
            <td>女</td>
            <td><a href="javascript:void(0); " onclick="deltr(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Xanax</td>
            <td>男</td>
            <td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
        </tr>
    </table>
    <script>
        /*
            分析：
            1.添加；
                1.给添加按钮绑定单击事件
                2.获取文本提取内容
                3.创建td 设置td的文本为文本框的内容
                4.创建tr
                5.将td添加到tr中
                6.获取table，将tr添加到table中
            2.删除：
                1.确定点击的是哪一个超链接
                    <a href="javascript:void(0); " οnclick="deltr(this)"></a>
                2.删除
                removeChild() 通过父节点删除子节点
        
        */

        //1.获取按钮
        var btnadd=document.getElementById("btnadd");
        btnadd.onclick=function(){
            
            //2.获取文本提取内容
            var id=document.getElementById("id").value;
            var name=document.getElementById("name").value;
            var gender=document.getElementById("gender").value;

            //3.创建td，赋值td的标签体

            //id的td
            var tdid=document.createElement("td");
            //tdid.appendChild(id); 不会起效果 因为id不是一个节点，是一个文本，所以我们将其转换为文本节点，传进去 添加功能才能生效
            tdid.appendChild(document.createTextNode(id));

            //name的td
            var tdname=document.createElement("td");
            tdname.appendChild(document.createTextNode(name));

            //gender的td
            var tdgender=document.createElement("td");
            tdgender.appendChild(document.createTextNode(gender));
            
            //a标签的td 
            var tddel=document.createElement("td");
            var ele_a=document.createElement("a");
            ele_a.setAttribute("href","javascript:void(0);");
            ele_a.setAttribute("onclick","deltr(this)");
            ele_a.appendChild(document.createTextNode("删除"));//给a添加文本节点
            tddel.appendChild(ele_a);//把创建好的a加入到tddel这个列的子节点中

            //4.创建tr
            var tr=document.createElement("tr");
            //5.添加td到tr中
            tr.appendChild(tdid);
            tr.appendChild(tdname);
            tr.appendChild(tdgender);
            tr.appendChild(tddel);
            //6.获取table，将tr添加到table中
            var table=document.getElementsByTagName("table")[0];
            table.appendChild(tr);
        }

        //删除方法
        function deltr(obj){//形式参数obj（随便定义的）用来接收传递的this，this代表当前超链接的对象
            
            //alert(obj);
            var table=obj.parentNode.parentNode.parentNode;
            var tr=obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    </script>
</body>
</html>

利用innerhtml来实现动态表格中的添加操作，与之前对于对象的操作相比，简化许多。

<!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>
        table{
            border: 1px solid rgb(45, 43, 201);
            margin:auto;
            width: 500px;
        }
        td,tr{
           text-align: center;
           border:1px solid; 
        }
        div{
            color: skyblue;
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btnadd">

    </div>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <td><b>编号</b></td>
            <td><b>姓名</b></td>
            <td><b>性别</b></td>
            <td><b>操作</b></td>
        </tr>
        <tr>
            <td>1</td>
            <td>Roxanne</td>
            <td>女</td>
            <td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Charles</td>
            <td>女</td>
            <td><a href="javascript:void(0); " onclick="deltr(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Xanax</td>
            <td>男</td>
            <td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
        </tr>
    </table>
    <script>
        /*
            分析：
            1.添加；
                1.给添加按钮绑定单击事件
                2.获取文本提取内容
                3.创建td 设置td的文本为文本框的内容
                4.创建tr
                5.将td添加到tr中
                6.获取table，将tr添加到table中
            2.删除：
                1.确定点击的是哪一个超链接
                    <a href="javascript:void(0); " οnclick="deltr(this)"></a>
                2.删除
                removeChild() 通过父节点删除子节点
        
        */
        //使用innerhtml来添加
        var btnadd=document.getElementById("btnadd");
        btnadd.onclick=function(){
            
            //2.获取文本提取内容
            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>\n"+
            "<td>"+id+"</td>"+
            "<td>"+name+"</td>"+
            "<td>"+gender+"</td>"+
            "<td><a href='javascript:void(0);'οnclick='deltr(this)'>删除</a></td>"+
            "</tr>"
        }

        

        //删除方法
        function deltr(obj){//形式参数obj（随便定义的）用来接收传递的this，this代表当前超链接的对象
            
            //alert(obj);
            var table=obj.parentNode.parentNode.parentNode;
            var tr=obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    </script>
</body>
</html>
Roxannekkk
关注
  • 7
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js 动态生成表格案例
a63438840的博客
09-07 1887
<1>布局：一个table表格，表格分为两个部分，上面是thead表头，表头里面仅一行，有4列（th), 下面是tbody表格内容，要求tbody中的每一行都是用js动态创建的 <body> <table> <thead> <tr> <th>姓名&...
JavaScript实现简单动态表格
01-18
本文实例为大家分享了JavaScript实现简单动态表格的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>动态表格<...
JavaScript实现动态写入表格
程序员大腾的博客
07-25 2119
如果我们在写程序的时候，接收到了后台传入的数据，怎么样用原生JavaScript把数据写入表格呢？如果第二次传来的数据与第一次不一样的话该怎么办呢？
JavaScript实现动态表格
xiaosongxiaozi的博客
01-21 584
JavaScript实现动态表格 （改建版，代码见最下面） 基本效果如下 点击添加，可以将输入框中的值，新增到表格中；点击删除可以删除本行内容。 代码如下： 第一种方式（较简单，建议使用） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格02</title> <style> ta...
原生js操作table表格增删改查操作汇总
最新发布
随手记的笔记
05-16 783
【代码】原生js操作table表格增删改查操作汇总。
javascript基础
weixin_44203609的博客
01-31 155
1.javascript入门 2.typeof 3.运算符 4.流程控制语句 和Java一样 5.数组 6.函数
javascript动态生成表格（一）
ipsen的专栏
08-16 901
用户在网页一系列对话框中输入要生成的表格的行数和列数以及生成的位置坐标等，然后点击“生成表格”按钮，执行javaScript脚本函数，在HTML网页指定位置上生成表格。-->var n=0;function TestSecond(){var div=document.createElement("div");div.id="div"+n;var table=document.createEleme
使用 JavaScript 创建表
allway2的博客
03-31 9022
JavaScript 编程语言允许我们创建和操作DOM（文档对象模型）元素。它为我们提供了更大的灵活性，并使每个人都可以更轻松地使用 DOM，尤其是如果您是后端开发人员。 有两种方法可以将 HTML 元素（如表格）添加到 HTML 文档中，第一种是将 HTML 表格标记直接添加到我们的 HTML 网页中，第二种方法是在我们的 JavaScript 代码中创建整个表格。第二个选项是最流行的创建表并将其添加到 DOM 的方法。 但在深入了解如何使用 JavaScript 创建表格之前，让我们首先直观地了解用
JavaScript实现动态生成表格
12-28
本文实例为大家分享了JavaScript实现动态生成表格的具体代码，供大家参考，具体内容如下 功能描述 在输入框中输入行和列，点击按钮，生成拥有对应行和列的表格。如下图所示： 分析 HTML界面设计 <body> 行...
JavaScript实现网页动态生成表格
01-21
JavaScript(JS)网页–动态生成表格，供大家参考，具体内容如下 在网页中，动态生成列表的内容，将数组中的object加入到列表中（没学到数据库）。在HTML中创建thead，然后通过JavaScipt动态生成tbody。并且在每行...
基于JavaScript实现动态添加删除表格的行
12-28
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp 产品名称 编号 数量 重量 操作 ...
jquery实现动态生成表格
11-13
数据展示时候，经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小，通过jquery的html()和append(）方法动态生成html表格的实例。
html生成动态表格（js程序）
10-16
用js代码实现动态生成表格，可输入行数，列数。点击按钮可以生成相对应的表格的小程序
Js表格操作
01-31
包括js动态表格的操作。数据的复制
HTML完美动态表格(可编辑)
04-23
完美表格。在此基础上可进行AJAX开发.可编辑选项包括下拉框和文本框等。动态添加行 删除行。tab键切换。回车键改变状态等。
动态生成表格案例（HTML+CSS+JS）
m0_48375854的博客
12-21 5272
在这里实现一个动态添加表格的案例，当点击添加按钮时，可以弹出一个表单，然后将输入的内容添加到表格中，也可以将表格中的整行内容清除。 实现代码为： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0;
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
Sanmu
04-22 2088
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里 需求分析: 使用JS动态生成Table表格、input框、button按钮 通过input框、button按钮实现查询。 将查询后的结果动态填写在table里面。 实现的效果 通过点击测试按钮生成下面的表格和其他组件 需求实现 1.先在页面定义一个div,用来指定表格生成在哪,并设置一个按钮来触发生成表格函数 <div id="ch_DIV
JavaScript实现动态查询表格
weixin_33691700的博客
03-13 292
JavaScript实现的一个动态查询表格，随着文本框中资料的改变，下边Table中的资料会自动筛选。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE <html> <head> ...
使用javascript和jQuery实现浮动表头或固定表头的一种方式
zidieq的博客
04-04 873
参考文献：https://blog.csdn.net/huanghanqian/article/details/52668667（主要贡献了浮动表头的实现方法及思路） https://www.cnblogs.com/dujingjie/p/4571943.html（主要贡献了例子的表格代码） 本文只是对第一个参考连接里面的浮动方法稍加修改。我在自己的页面上（使用bootstrap4修饰的表格）没发现有太明显的问题，但是在下面的例子中，如果table设置了border的话，浮动的表头会有点偏差，不知道如何
javascript 实现表格排序
02-06
要实现JavaScript表格排序，可以使用JavaScript的Array对象和DOM操作来实现。首先，可以通过document.getElementById()方法来获取要进行排序的表格元素，并且使用getElementsByTagName()方法来获取表格的行和列,然后存储在数组中，对这个数组进行排序。 其次，可以使用addEventListener()方法给表头的每个单元格加上点击事件，当用户点击表头单元格时触发排序函数。在排序函数中，可以使用数组的sort()方法对行进行排序，然后重新遍历表格并用新的顺序重组行，实现表格的重新排序。 另外，还可以在单元格上添加一些小箭头或其他标识，以显示当前排序的方向。通过点击表头单元格时切换排序方向，或者给每列添加一个升序/降序按钮。 最后，最好对排序函数进行抽象，提高可复用性，使得它可以应用到不同的表格中。这样在其他需要排序的表格，只需要调用这个函数即可实现表格排序。 总之，JavaScript实现表格排序就是通过利用数组和DOM操作，监听表头的点击事件，调用排序函数，重新排列表格的行，通过这种方式来实现表格的排序功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值