表格动态实现

最新推荐文章于 2023-09-21 15:57:23 发布
最新推荐文章于 2023-09-21 15:57:23 发布
阅读量62 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68968422/article/details/124081458
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        a {

            text-decoration: none;

        }

       

        table {

            width: 500px;

            margin: 100px auto;

            border-collapse: collapse;

            text-align: center;

        }

       

        td,

        th {

            border: 1px solid #333;

        }

       

        thead tr {

            height: 40px;

            background-color: #ccc;

        }

    </style>

</head>

<body>

    <table cellspacing="0">

        <thead>

            <tr>

                <th>角色</th>

                <th>法术</th>

                <th>法力</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

            <!-- 表格数据动态生成 -->

            <!-- <tr>

                <td></td>

            </tr> -->

        </tbody>

    </table>

    <script>

        // 模拟数据：利用对象存储数据

        // step1. 准备不同人物的数据

        // 数组对象 datas 可以存储任意类型数据

        // 每个数组元素 datas[i] 都是一个对象

        var datas = [{

            // 角色

            name: '闻人翊悬',

            // 法术

            magic: '火系',

            // 法力

            mana: 85

        }, {

            name: '申屠子夜',

            magic: '水系',

            mana: 80

        }, {

            name: '公仪楚人',

            magic: '土系',

            mana: 85

        }, {

            name: '容成墨熙',

            magic: '木系',

            mana: 90

        }, {

            name: '轩辕神君',

            magic: '金系',

            mana: 100

        }, {

            name: '小新',

            magic: '童系',

            mana: 100

        }];

        var tbody=document.querySelector('tbody');

for (var i=0;i<datas.length;i++){

        var tr=document.createElement('tr');

        tbody.appendChild(tr);

       

    for (var k in datas[i]){

        var td=document.createElement('td');

        td.innerHTML=datas[i][k];

        tr.appendChild(td);

    }

var td=document.createElement('td');

td.innerHTML='<a href="JavaScript">删除</a>';

tr.appendChild(td);

}

</script>

</body>

</html>

！安青柚！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用javascript实现表格的删除
weiyuyang250的博客
10-13 1024
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
老师作业用js制作一个简单的表单添加和删除
qq_45070002的博客
03-14 432
1先写好html和css样式 请输入姓名: 请输入性别: 男 女 请输入年龄: 添加到表格 全选 姓名 性别 年龄
js 添加删除表格
03-01
js 添加删除表格 博文链接：https://huashaozhawei.iteye.com/blog/151792
js动态添加删除表格
09-02
js,javascript
动态添加表格
weixin_54668937的博客
06-08 874
文献种类：专题技术文献； 开发工具与关键技术： VS、jQuery 作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 6 月 8日 下面我们来看一下如何动态的添加表格数据。 我们主要会用到each()方法和append()方法， 前者是用来为每个匹配的元素规定运行的函数， 后者是用来给被选择到的元素的结尾插入内容。 知道了each ()方法和append()方法的作用后，我们接下来开始编写动态添加表格的代码， 我们要先把相应的数据库引入，然后再创建视图， 因为后面需要用到Boo
基于Jquery实现表格动态分页实现代码
12-07
本示例是基于jQuery实现的表格动态分页，当用户点击分页图标时，页面会通过AJAX向服务器请求对应页数的数据。 首先，为了实现这个功能，我们需要引入必要的CSS和JavaScript库。在HTML中，我们添加了以下链接： ```...
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
JS实现动态生成表格并提交表格数据向后端
10-22
在本文中，我们将探讨如何使用JavaScript（JS）动态生成表格，并将表格中的数据提交到后端服务器。...掌握以上知识点后，开发者就能够利用JavaScript来实现动态生成表格以及向后端提交表格数据的功能了。
Vue.js实现表格动态增加删除的方法（附源码下载）
10-20
在本文中，我们将探讨如何使用Vue.js实现表格的动态增加和删除功能，这在开发过程中非常常见，尤其对于数据展示和管理的应用场景。 首先，Vue.js的核心特性之一是它的响应式数据绑定。`v-model`指令就是这种绑定的...
jQuery实现为table表格动态添加或删除tr功能示例
01-19
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能。分享给大家供大家参考，具体如下： HTML页面元素如下： <!-- 订单明细dialog --> 销售订单明细 xss=removed> 订单合同号 ...
js实现添加删除表格（两种方法）
10-19
本篇文章主要介绍了js实现添加删除表格（两种方法）的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
jQuery实现表格元素动态创建功能
10-20
主要为大家详细介绍了jQuery实现表格元素动态创建功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js 实现 删除表格指定行
03-31
js 实现 删除表格指定行! 值得下载看看!资源免费,大家分享!!
js动态创建，删除表格
xueliang59211的专栏
02-24 2325
生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号 方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充。 方法二：使用createElement生成表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。 方法三：拼接表格i
用js添加删除表格
mingWar的专栏
01-29 2490
http://www.w3.org/1999/xhtml">Untitled Document function createTable(){var objDiv = document.getElementById("divid");var vtable=document.createElement("table"); // vtable.id="idTB"; vtable.cellPadding
JavaScript实现表格的添加和删除
a_sid的博客
12-04 2458
<html> <head> <meta charset="utf-8"/> <title>JavaScript实例</title> <style> select,option,div,button{margin:0px;padding:0px;} #lid,#rid,div{
如何利用js实现删除表格每行的功能？
最新发布
csgojingyu的博客
09-21 1052
一定要包含在<table></table>之间，否则会打印多个表头！
layui实现表格动态分页
05-19
在Layui中，可以使用表格组件lay-table来实现表格动态分页。具体步骤如下： 1. 在HTML中添加一个表格容器： ```html <table id="demo" lay-filter="test"></table> ``` 2. 在JavaScript中定义表格数据： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值