jQuery动态创建表格

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>动态创建表格</title>

     <script src="jquery-1.11.1.js"></script>

     <style>

         table {

             border-collapse: collapse;

             border-spacing: 0;/*单元格和表格边框合并*/

             border: 1px solid #c0c0c0;

         }

         th,

         td {

             border: 1px solid #d0d0d0;

             color: #404060;

             padding: 10px;

         }

         th {

             background-color: #09c;

             font: bold 16px "微软雅黑";

             color: #fff;

         }

         td {

             font: 14px "微软雅黑";

         }

         tbody tr {

             background-color: #f0f0f0;

         }

         tbody tr:hover {

             cursor: pointer;

             background-color: #fafafa;

         }

     </style>

     <script>

             var data=[{

                 name:"传智播客",

                 url:"www.baidu.com",

                 type:"百度搜索引擎"

             },{

                 name:"黑马程序员",

                 url:"www.baidu.com",

                 type:"百度搜索引擎"

             },{

                 name:"传智前端学院",

                 url:"www.baidu.com",

                 type:"百度搜索引擎"

             }];

             $(function(){

                 //第一种方法

                /* var str="";

                 //将数组动态创建到tbody中去

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

                     var temp=data[i];

                     str+="<tr>";

                     str+=   "<td>" + temp.name + "</td>";

                     str+=   "<td>" + temp.url  + "</td>";

                     str+=   "<td>" + temp.type + "</td>";

                     str+="</tr>";

                 }

                 //把拼接好的html放到tbody中去

                 $("#tb").html(str);*/

                 //第二种方法

                 $("#tb").empty();//清空所有子节点

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

                     var temp=$("<tr></tr>");//动态创建tr标签

                     temp.append("<td>"+data[i].name+"</td>");//给每行添加单元格

                     temp.append("<td>"+data[i].url+"</td>");

                     temp.append("<td>"+data[i].type+"</td>");

                     $("#tb").append(temp);

                 }

         })

     </script>

 </head>

 <body>

     <table>

         <thead id="th">

             <tr>

                 <th>标题</th>

                 <th>地址</th>

                 <th>说明</th>

             </tr>

         </thead>

         <tbody id="tb"></tbody>

     </table>

 </body>

 </html>

运行效果：

第84天：jQuery动态创建表格的更多相关文章

  1. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

  3. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  4. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  5. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  6. FineUIMvc随笔 - 动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...

  7. FineUIMvc随笔（1）动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...

  8. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  9. 解决jquery动态创建元素绑定事件失效问题

    存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...

随机推荐

  1. 20155222 2016-2017-2 《Java程序设计》第3周学习总结

    20155222 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 要产生对象必须先定义类,类是对象的设计图,对象是类的实例. 数组一旦建立,长度就固定了. 字 ...

  2. C语言复习20170728

    C语言复习20170728 键盘输入和屏幕输出 字符常量:把字符放在一对单引号内,适用于多数可打印字符. 转义字符: 以反斜线()开头,也是放在一对单引号内,适用于控制字符. .\t,是水平制表符,相 ...

  3. 【SQLSERVER】索引的维护优化

    一.索引的利弊   优点: 1.大大加快数据的检索速度: 2.创建唯一性索引,保证数据库表中每一行数据的唯一性: 3.加速表和表之间的连接: 4.在使用分组和排序子句进行数据检索时,可以显著减少查询中 ...

  4. Connect C# to MySQL

    Connect C# to MySQL using MySQL Connector/Net, Insert, Update, Select, Delete example, Backup and re ...

  5. 【MySQL函数】日期篇

    1.date_format()函数 date_format(createtime,'%Y') 年 date_format(createtime,'%Y-%m') 年月 date_format(crea ...

  6. javaweb(十五)——JSP基础语法

    任何语言都有自己的语法,JAVA中有,JSP虽然是在JAVA上的一种应用,但是依然有其自己扩充的语法,而且在JSP中,所有的JAVA语句都可以使用. 一.JSP模版元素 JSP页面中的HTML内容称之 ...

  7. 如何运用 Powershell 修改Office365和AD账户

    这段时间需要大量地修改AD用户的一些属性,例如邮件,UPN,登录名等等,以便和Office365的登录账号保持一致.写了个简单脚本进行批量修改. #Import AD ModuleImport-Mod ...

  8. 自动化运维工具saltstack01 -- 之SaltStack介绍、安装与基础使用

    SaltStack介绍 官网地址:http://www.saltstack.com 官方文档地址:http://docs.saltstack.com Github:http://Github.com/ ...

  9. adb shell top 命令详解

    [?25l[0m[H[J 当前系统时间 Tasks: 552 total, 1 running, 510 sleeping, 0 stopped, 0 zombie 任务(进程) 系统现在共有552个 ...

  10. nginx 源码阅读 core

    ngx_config.h 数据对齐 #define ngx_align(d, a)     (((d) + (a - 1)) & ~(a - 1)) ngx_core.h #define ng ...