1.代码实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>02-jQuery-动态创建表格案例</title>
  6.     <script src="jquery-1.11.3.js"></script>
  7.     <style>
  8.         * { padding: 0; margin: 0; }
  9.         table {
  10.             border-collapse: collapse;
  11.             border-spacing: 0;
  12.             border: 1px solid #c0c0c0;
  13.         }
  14.  
  15.         th,td {
  16.             border: 1px solid #d0d0d0;
  17.             color: #404060;
  18.             padding: 10px;
  19.         }
  20.  
  21.         th {
  22.             background-color: #09c;
  23.             font: bold 16px "微软雅黑";
  24.             color: #fff;
  25.         }
  26.  
  27.         td {
  28.             font: 14px "微软雅黑";
  29.         }
  30.         tbody tr {
  31.             background-color: #f0f0f0;
  32.         }
  33.         tbody tr:hover {
  34.             cursor: pointer;
  35.             background-color: #fafafa;
  36.         }
  37.     </style>
  38.     <script>
  39.         var data = [{
  40.             name: "传智播客",
  41.             url: "http://www.itcast.cn",
  42.             type: "IT最强培训机构"
  43.         },{
  44.             name: "黑马程序员",
  45.             url: "http://www.itheima.com",
  46.             type: "大学生IT培训机构"
  47.         },{
  48.             name: "传智前端学院",
  49.             url: "http://web.itcast.cn",
  50.             type: "前端的黄埔军校"
  51.         }];
  52.  
  53.         $(function(){
  54.             //第一种：动态创建表格的方式，使用拼接html的方式 （推荐）
  55.             // var html = "";
  56.             // for( var i = 0; i < data.length; i++ ) {
  57.             //     html += "<tr>";
  58.             //     html +=     "<td>" + data[i].name + "</td>"
  59.             //     html +=     "<td>" + data[i].url + "</td>"
  60.             //     html +=     "<td>" + data[i].type + "</td>"
  61.             //     html += "</tr>";
  62.             // }
  63.             // $("#J_TbData").html(html);
  64.  
  65.             //第二种： 动态创建表格的方式，使用动态创建dom对象的方式
  66.             //清空所有的子节点
  67.             $("#J_TbData").empty();
  68.  
  69.             //自杀
  70.             // $("#J_TbData").remove();
  71.  
  72.             for( var i = 0; i < data.length; i++ ) {
  73.                 //动态创建一个tr行标签,并且转换成jQuery对象
  74.                 var $trTemp = $("<tr></tr>");
  75.  
  76.                 //往行里面追加 td单元格
  77.                 $trTemp.append("<td>"+ data[i].name +"</td>");
  78.                 $trTemp.append("<td>"+ data[i].url +"</td>");
  79.                 $trTemp.append("<td>"+ data[i].type +"</td>");
  80.                 // $("#J_TbData").append($trTemp);
  81.                 $trTemp.appendTo("#J_TbData");
  82.             }
  83.         });
  84.     </script>
  85. </head>
  86. <body>
  87.     <table>
  88.         <thead>
  89.             <tr>
  90.                 <th>标题</th>
  91.                 <th>地址</th>
  92.                 <th>说明</th>
  93.             </tr>
  94.         </thead>
  95.         <tbody id="J_TbData">
  96.         </tbody>
  97.     </table>
  98.  
  99.     <br>
  100.     <!-- 整个表格：ｔａｂｌｅ -->
  101.     <table>
  102.         <thead>
  103.             <tr>  <!-- tr：table row：表格的行 -->
  104.                 <th>一个格</th>
  105.                 <th>一个格</th>
  106.                 <th>一个格</th>
  107.             </tr>
  108.         </thead>
  109.         <tbody>
  110.             <tr>
  111.                 <!-- rowspan:跨度两个行 -->
  112.                 <td rowspan="2">一个格</td>
  113.  
  114.                 <!-- clospan：跨度两个列 -->
  115.                 <td colspan="2">一个格</td>
  116.                 <!-- <td>一个格</td> -->
  117.             </tr>
  118.  
  119.             <tr>
  120.                 <!-- <td>sd</td> -->
  121.                 <td>ss</td>
  122.                 <td>ss</td>
  123.             </tr>
  124.         </tbody>
  125.  
  126.     </table>
  127. </body>
  128. </html>

2.实例截图

jquery动态创建表格的更多相关文章

  1. 第84天：jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  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. 安迪的第一个字典（UVa10815)

    题目具体描述见:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_prob ...

  2. Codeforces Round #292 (Div. 1) C - Drazil and Park

    C - Drazil and Park 每个点有两个值Li 和 Bi,求Li + Rj (i < j) 的最大值,这个可以用线段树巧妙的维护.. #include<bits/stdc++. ...

  3. 【WPF】WriteableBitmap和BitmapImage的相互转换

    public BitmapImage ConvertWriteableBitmapToBitmapImage(WriteableBitmap wbm) { BitmapImage bmImage = ...

  4. 用vue-wechat-title为微信动态设置标题

    1.安装插件 cnpm install vue-wechat-title --save 2.在main.js中引入 Vue.use(require('vue-wechat-title')) 3.在路由 ...

  5. ref:如何在大量jar包中搜索特定字符

    ref:https://www.cnblogs.com/jiangxinnju/p/5137760.html?utm_source=tuicool&utm_medium=referral 如何 ...

  6. javascript 原生得到document.Element的方法

    今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法. 1.document.getElementById.这个方法接收1个参数,就是DOM元素的id(区分大小写),这 ...

  7. Windows 消息循环(2) - WPF中的消息循环

    接上文: Windows 消息循环(1) - 概览 win32/MFC/WinForm/WPF 都依靠消息循环驱动,让程序跑起来. 本文介绍 WPF 中是如何使用消息循环来驱动程序的. 4 消息循环在 ...

  8. 「CSA49」Bunny on Number Line

    「CSA49」Bunny on Number Line 题目大意:有一个人从0开始走,每次可以向前走一步或者回到1,那么会产生一个位置序列,其中给出 \(k\) 个位置是好的.定义一个位置序列是好的, ...

  9. [APIO / CTSC2007]数据备份 --- 贪心

    [APIO / CTSC 2007]数据备份 题目描述 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份. 然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公 ...

  10. 【Kruskal+贪心思想】BZOJ3624-[Apio2008]免费道路

    国庆万岁!!!!! [题目大意] 给定一张无向图,有两种边的类型为0和1.求一个最小生成树使得边0有k条. [思路] 跑两次Kruskal. 第一次的时候优先选择边1,然后判断有哪些边0还不能连通,那 ...