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;

            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: "http://www.itcast.cn",

            type: "IT最强培训机构"

        },{

            name: "黑马程序员",

            url: "http://www.itheima.com",

            type: "大学生IT培训机构"

        },{

            name: "传智前端学院",

            url: "http://web.itcast.cn",

            type: "前端的黄埔军校"

        }];

        $(function(){

            //第一种：动态创建表格的方式，使用拼接html的方式 （推荐）

            // var html = "";

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

            //     html += "<tr>";

            //     html +=     "<td>" + data[i].name + "</td>"

            //     html +=     "<td>" + data[i].url + "</td>"

            //     html +=     "<td>" + data[i].type + "</td>"

            //     html += "</tr>";

            // }

            // $("#J_TbData").html(html);

            //第二种： 动态创建表格的方式，使用动态创建dom对象的方式

            //清空所有的子节点

            $("#J_TbData").empty();

            //自杀

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

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

                //动态创建一个tr行标签,并且转换成jQuery对象

                var $trTemp = $("<tr></tr>");

                //往行里面追加 td单元格

                $trTemp.append("<td>"+ data[i].name +"</td>");

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

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

                // $("#J_TbData").append($trTemp);

                $trTemp.appendTo("#J_TbData");

            }

        });

    </script>

</head>

<body>

    <table>

        <thead>

            <tr>

                <th>标题</th>

                <th>地址</th>

                <th>说明</th>

            </tr>

        </thead>

        <tbody id="J_TbData">

        </tbody>

    </table>

    <br>

    <!-- 整个表格：ｔａｂｌｅ -->

    <table>

        <thead>

            <tr>  <!-- tr：table row：表格的行 -->

                <th>一个格</th>

                <th>一个格</th>

                <th>一个格</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <!-- rowspan:跨度两个行 -->

                <td rowspan="2">一个格</td>

                <!-- clospan：跨度两个列 -->

                <td colspan="2">一个格</td>

                <!-- <td>一个格</td> -->

            </tr>

            <tr>

                <!-- <td>sd</td> -->

                <td>ss</td>

                <td>ss</td>

            </tr>

        </tbody>

    </table>

</body>

</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. rmdir命令

    rmdir命令用来删除空目录.当目录不再被使用时,或者磁盘空间已到达使用限定值,就需要删除失去使用价值的目录.利用rmdir命令可以从一个目录中删除一个或多个空的子目录.该命令从一个目录中删除一个或多 ...

  2. 使用BEEGO建立一个基本的API框架

    用BEE API命令生成框架. 然后自行更改MODELS,加入MYSQL支持ORM. 然后,自定义了字段的对应,表的名称等. 参考URL: http://www.cnblogs.com/studyzy ...

  3. [MySQL] specified key was too long max key length is 767bytes

    https://blog.csdn.net/u012099869/article/details/53815084/

  4. 解决序列化类型为“System.Reflection.RuntimeModule”的对象时检测到循环引用。

    定义一个继承JavaScriptConverter的子类 public class DataTableConverter : JavaScriptConverter { /// <summary ...

  5. 抽象工厂模式(Abstract Factory)C#实例

    抽象工厂模式(Abstract Factory)C#实例 本文出处http://www.dofactory.com/net/abstract-factory-design-pattern 一.场景描述 ...

  6. Python全栈开发之3、数据类型set补充、深浅拷贝与函数

    转载请注明出处http://www.cnblogs.com/Wxtrkbc/p/5466082.html 一.基本数据类型补充 set是一个无序而且不重复的集合,有些类似于数学中的集合,也可以求交集, ...

  7. Vibrator震动

    今天又学一招: Android手机中的震动由Vibrator实现.设置震动事件,需要知道其震动的时间长短.震动的周期等. 在 Android Vibrator中,震动的时间以毫秒计算(1/1000秒) ...

  8. thinkphp5.0架构总览

    ThinkPHP5.0应用基于MVC(模型-视图-控制器)的方式来组织. MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC应用程序被分成三个核心部件:模型(M).视图(V) ...

  9. 2017年浙江中医药大学大学生程序设计竞赛（重现赛）D - CC的神奇背包

    题目描述 cc最近收到了好多礼物,对着满地大小不一的礼物,她想要一个包来装,于是dd就掏出了一个会说话的神奇背包给cc装礼物.cc为了一次性装尽可能多的礼物,于是跟这个背包定下了一个规则,对每个礼物, ...

  10. EOJ 3260 袋鼠妈妈找孩子

    暴力搜索. 主要目的就是找到任意一条路径,使得路径长度大于等于$k+1$,写个爆搜发现很快能出解.判断某点是否可走,需要看四周有没有已经走过的点的$dis$比这个点的$dis$小$2$或者$2$以上. ...