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. 预备作业03：虚拟机安装及Linux操作系统练习

    安装虚拟机 安装时遇到的问题 在打开虚拟机时出现以下问题: 经查询该问题只需要更改其兼容性,使其"以管理员身份运行". 常用的Linux命令 $ who am i:查看当前伪终端的 ...

  2. 见到Unicode、GB2312、GBK 、ANSI、Ascii、DBCS、BIG5、UTF这一堆名词你是否犯晕？请看转载的好文

    作者:于洋链接:https://www.zhihu.com/question/23374078/answer/69732605来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  3. Luogu2183【国家集训队】礼物

    题面 题解 易得答案为 $$ \sum_{i=1}^m\binom{n-\sum_{j=1}^{i-1}w_j}{\sum_{j=1}^iw_j} $$ 扩展$\text{Lucas}$即可 代码 # ...

  4. OKHttp使用demo（证书过滤，证书导入，代理访问，文件上传）

    此demo需要引入okhttp-3.4.1.jar 和 okio-1.9.0.jar(这两个包需要jdk1.7以上的环境) 对应pom文件是: <dependency> <group ...

  5. 设置PNG图片DPI 信息，保存为PDF（使用Magick），与OpenCV转换

    目录 任务描述 解决方案 Magick++ Talk is cheap, show me the code. 与 Opencv 配合 相关链接 任务描述 我有这样一个需求,读取一张格式为PNG 或者 ...

  6. JAVA学习笔记--简介几个常见关键字static、final、this、super

    一.static static(静态的),可以放在类.方法.字段之前. 通常,当创建类时,就是在描述那个类的外观与行为.除非用 new 创建那个类的对象,否则,实际上并未获得任何对象.执行 new 来 ...

  7. kNN--近邻算法

    kNN--近邻算法 kNN算法的核心思想是如果一个样本在特征空间中的k个最相邻的样本中的大多数属于某一个类别,则该样本也属于这个类别,并具有这个类别上样本的特性. 在机器学习中常用于分类. 数学内容: ...

  8. Paper Reading - Long-term Recurrent Convolutional Networks for Visual Recognition and Description ( CVPR 2015 )

    Link of the Paper: https://arxiv.org/abs/1411.4389 Main Points: A novel Recurrent Convolutional Arch ...

  9. PowerDesigne 建立概念数据模型

    本文主要介绍PowerDesigner概念数据模型以及实体.属性创建. 一.新建概念数据模型1)选择File-->New,弹出如图所示对话框,选择CDM模型(即概念数据模型)建立模型. 2)完成 ...

  10. Qt绘图

    Qt绘图的设置 QPainter::Antialiasing // 反锯齿 QPainter::TextAntialiasing // 文字反锯齿 QPainter::SmoothPixmapTran ...