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 -->
<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. JAVA 抽象类、接口

    一.抽象类 1.语法定义 在类前面使用 abstract 修饰的类就是抽象类 2.应用场景: (1)在某些情况下,某个父类只是知道其子类应该包含怎样的方法,但无法准确知道这些子类如何实现这些方法. ( ...

  2. EF – 2.EF数据查询基础(上)查询数据的实用编程技巧

    目录 5.4.1 查询符合条件的单条记录 EF使用SingleOrDefault()和Find()两个方法查询符合条件的单条记录. 5.4.2 Entity Framework中的内部数据缓存 DbS ...

  3. PHP 分割字串 Function 的速度比較(substr/sscanf/preg_match)---substr最快!

    固定長度的字串(假設是 06481a63041b578d702f159f520847f8), 要照固定格式做切割, 使用 PHP 要怎麼切會比較快? 註: 要將此字串切成 => 06 / 48 ...

  4. ASP.NET Zero--1.如何开始

    1.加群 群号:104390185,下载这个文件并解压 用VS2015打开aspnet-zero-1.9.0.1 2.修改配置文件 Web项目web.config连接字符串 <add name= ...

  5. VuGen:一般选项General Option

  6. 转:VMMAP内存查看工具

    转:http://blog.csdn.net/woddle/article/details/45337767 下面我根据VMMap来详细介绍一下内存的分类. 内存是一个很复杂的系统,其中的paging ...

  7. URAL 1997 Those are not the droids you're looking for

    二分图的最大匹配. 每一个$0$与$1$配对,只建立满足时差大于等于$a$或者小于等于$b$的边,如果二分图最大匹配等于$n/2$,那么有解,遍历每一条边输出答案,否则无解. #include< ...

  8. HDU 6052 To my boyfriend(概率 贡献)

    To my boyfriend Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  9. 再谈mobile web retina 下 1px 边框解决方案

    本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. ...

  10. property staticmathod classmethod 反射

    使用@property 在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 9999 这显然不合逻 ...