动态建表格(来自https://www.cnblogs.com/mr-wuxiansheng/p/6363570.html)

最新推荐文章于 2021-06-05 01:39:03 发布
最新推荐文章于 2021-06-05 01:39:03 发布
阅读量253 收藏
点赞数
分类专栏： 好博客 文章标签： 动态建表格

1.代码实例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-jQuery-动态创建表格案例</title>
    <script src="jquery-1.11.3.js"></script>
    <style>
        * { padding: 0; margin: 0; }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

    th,td {
        border: 1px solid #d0d0d0;
        color: #404060<span>;
        padding: 10px;
    }

    th {
        background-<span>color: #09c;
        font: bold 16px "微软雅黑"<span>;
        color: #fff;
    }

    td {
        font: 14px "微软雅黑"<span>;
    }
    tbody tr {
        background-<span>color: #f0f0f0;
    }
    tbody tr:hover {
        cursor: pointer;
        background-<span>color: #fafafa;
    }
&lt;/style&gt;
&lt;script&gt;<span>
    var data =<span> [{
        name: "传智播客"<span>,
        url: "http://www.itcast.cn"<span>,
        type: "IT最强培训机构"<span>
    },{
        name: "黑马程序员"<span>,
        url: "http://www.itheima.com"<span>,
        type: "大学生IT培训机构"<span>
    },{
        name: "传智前端学院"<span>,
        url: "http://web.itcast.cn"<span>,
        type: "前端的黄埔军校"<span>
    }];

    $(function(){
        //第一种：动态创建表格的方式，使用拼接html的方式 （推荐）
        // var html = "";
        // for( var i = 0; i &lt; data.length; i++ ) {
        //     html += "&lt;tr&gt;";
        //     html +=     "&lt;td&gt;" + data[i].name + "&lt;/td&gt;"
        //     html +=     "&lt;td&gt;" + data[i].url + "&lt;/td&gt;"
        //     html +=     "&lt;td&gt;" + data[i].type + "&lt;/td&gt;"
        //     html += "&lt;/tr&gt;";
        // }
        // $("#J_TbData").html(html);

        //第二种： 动态创建表格的方式，使用动态创建dom对象的方式
        //清空所有的子节点
        $("#J_TbData"<span>).empty();

        //自杀
        // $("#J_TbData").remove();

        for( var i = 0; i &lt; data.length; i++<span> ) {
            //动态创建一个tr行标签,并且转换成jQuery对象
            var $trTemp = $("&lt;tr&gt;&lt;/tr&gt;"<span>);

            //往行里面追加 td单元格
            $trTemp.append("&lt;td&gt;"+ data[i].name +"&lt;/td&gt;"<span>);
            $trTemp.append("&lt;td&gt;"+ data[i].url +"&lt;/td&gt;"<span>);
            $trTemp.append("&lt;td&gt;"+ data[i].type +"&lt;/td&gt;"<span>);
            // $("#J_TbData").append($trTemp);
            $trTemp.appendTo("#J_TbData"<span>);
        }
    });
&lt;/script&gt;

</head>
<body>
<table>
<thead>
<tr>
<th>标题</th>
<th>地址</th>
<th>说明</th>
</tr>
</thead>
<tbody id=“J_TbData”>
</tbody>
</table>

&lt;br&gt;
&lt;!-- 整个表格：ｔａｂｌｅ --&gt;
&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;  &lt;!-- tr：table row：表格的行 --&gt;
            &lt;th&gt;一个格&lt;/th&gt;
            &lt;th&gt;一个格&lt;/th&gt;
            &lt;th&gt;一个格&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;!-- rowspan:跨度两个行 --&gt;
            &lt;td rowspan="2"&gt;一个格&lt;/td&gt;

            &lt;!-- clospan：跨度两个列 --&gt;
            &lt;td colspan="2"&gt;一个格&lt;/td&gt;
            &lt;!-- &lt;td&gt;一个格&lt;/td&gt; --&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;!-- &lt;td&gt;sd&lt;/td&gt; --&gt;
            &lt;td&gt;ss&lt;/td&gt;
            &lt;td&gt;ss&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;

&lt;/table&gt;

</body>
</html>

 

2.实例截图

 

 

qq_41142333
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ac.qq.com200.html,aqb-20200806
weixin_42501848的博客
06-20 1万+
0001603978-20-000098.txt : 202008060001603978-20-000098.hdr.sgml : 2020080620200806160213ACCESSION NUMBER:0001603978-20-000098CONFORMED SUBMISSION TYPE:8-KPUBLIC DOCUMENT COUNT:16CONFORMED PERIOD OF R...
likeke00.github.io：https：//www.cnblogs.comthanksblogp12900165.html
03-04
用户可以通过定义布局、配置 YAML 头信息和使用Liquid模板语言来创建动态效果的静态网站。 5. **个人品牌与技术博客**: 很多人使用GitHub Pages创建个人博客，分享技术文章，提升个人品牌。这种做法可以帮助IT专业...
html中动态创建表格
qq_44723175的博客
05-02 2883
<html> <head> </head> <body> 行：<input type="text" id="h"/> 列：<input type="text" id="l"/> <br/> <input type="button" value="生成" onclick="add...
旧的国外网站
爱孔孟
06-13 1万+
Android Apps and News - AndroinicaStack OverflowGitHub · Social Coding 开源Android ListView with Load More ButtonStyling Android » Text ShadowsNCZOnlineThe Endeavour — The blog of John D. CookOracle Tec
编辑器未包含main类型
weixin_30951743的博客
03-22 5902
明明写了main函数，在运行的时候，却得到这样的结果。 解决方案： 重新建立一个项目，建立项目的过程中 转载于:https://www.cnblogs.com/mrxiaohe/p/6599875.html...
bndong https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/
05-05
bndong https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/
xampp_7.4.3.0 mantisbt-2.25.5 安装说明步骤 https://www.cnblogs.com/m
08-26
mantisbt 使用手册
sso详细设计说明书（下篇）转载（海纳百川文章http://www.cnblogs.com/David-weihw/a）
03-01
SSO（Single Sign-On）单点登录是一种身份验证机制，允许用户在多个应用系统中只需登录一次，即可访问所有相互信任的应用系统，无需再次进行身份验证。本详细设计说明书的下篇将深入探讨SSO的核心原理、实现方式及...
HSQLDB安装与使用-转自http://www.cnblogs.com/wllyy189/archive/2008/11/15/1334002.html
05-25
INSERT INTO Users (id, name, email) VALUES (1, 'John Doe', 'john.doe@example.com'); ``` 4. **查询数据**: 执行SELECT语句获取数据： ```sql SELECT * FROM Users; ``` **源码分析** HSQLDB是用纯Java...
html根据数据动态创建表格,HTML　DOM动态创建表格（１）
weixin_35110501的博客
06-05 235
table,td,th{border:1pxsolidblack;color:red;}vartxt='[\{\"id":1,\"name":"张三",\"age":20\},\{\"id":2,\"name":"李四",\"age":21\},\{\"id":3,\"name":"王五",\"age":22\}\]';varperson=JSON.parse(txt);va...
HTML之如何创建表格？
热门推荐
花果山的和尚的博客
06-19 2万+
表格由 &lt;table&gt; 标签来定义。每个表格均有若干行（由 &lt;tr&gt; 标签定义），每行被分割为若干单元格（由 &lt;td&gt; 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。border属性指定有无边框，不写border属性或者赋值为0，创建的表格都将没有边框;赋值的大小...
微信小程序设计淘宝客导购小程序 pangolin_tbk 2.0.8安装更新一体包源代码+部署教程完美运行版.7z
08-11
经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。
光伏风电出力预测（Prediction of PV power and wind power oiutputs）+源代码+说明
08-11
<项目介绍> - python、Sk-learn、概率预测、光伏出力、风电出力 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
智慧景区综合解决方案.docx
08-11
智慧景区综合解决方案.docx
mediapipe-0.8.8.1-cp37-cp37m-win_amd64.whl
08-11
mediapipe-0.8.8.1-cp37-cp37m-win_amd64.whl
Windows 微信历史版本 V3.9.6.32
最新发布
08-11
版本信息概述 版本号：V3.9.6.32 平台：Windows 类型：历史版本
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习
08-11
七夕情人节表白代码简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习 简历是展示个人经历、技能和能力的重要文档，以下是一个常见的简历格式和内容模板，供您参考： 简历格式： 头部信息：包括姓名、联系方式（电话号码、电子邮件等）、地址等个人基本信息。 求职目标（可选）：简短描述您的求职意向和目标。 教育背景：列出您的教育经历，包括学校名称、所学专业、就读时间等。 工作经验：按时间顺序列出您的工作经历，包括公司名称、职位、工作时间、工作职责和成就等。 技能和能力：列出您的专业技能、语言能力、计算机技能等与职位相关的能力。 实习经验/项目经验（可选）：如果您有相关实习或项目经验，可以列出相关信息。 获奖和荣誉（可选）：列出您在学术、工作或其他领域获得的奖项和荣誉。 自我评价（可选）：简要描述您的个人特点、能力和职业目标。 兴趣爱好（可选）：列出您的兴趣爱好，展示您的多样性和个人素质。 参考人（可选）：如果您有可提供推荐的人员，可以在简历中提供其联系信息。 简历内容模板： 姓名: 联系方式: 地址: 求职目标: （
数据结构期末复习题目.docx
08-11
内有数据结构选择题、判断题、填空题、计算题等多种类型题目（注填空题在最后为伪代码填空）
:https://www.cnblogs.com/coderL/p/6740336.html
04-24
通过将基类指针指向派生类对象，并通过该指针调用虚函数，可以实现动态绑定（Dynamic Binding），即在运行时确定调用的是哪个版本的函数。 2. 纯虚函数（Pure Virtual Function）：纯虚函数是在基类中声明的但没有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值