动态建表格(来自https://www.cnblogs.com/mr-wuxiansheng/p/6363570.html)
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<span>;padding: 10px;}th {background-<span>color: #09c;font: bold 16px "微软雅黑"<span>;color: #fff;}td {font: 14px "微软雅黑"<span>;}tbody tr {background-<span>color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-<span>color: #fafafa;}
</style>
<script><span>var data =<span> [{name: "传智播客"<span>,url: "http://www.itcast.cn"<span>,type: "IT最强培训机构"<span>},{name: "黑马程序员"<span>,url: "http://www.itheima.com"<span>,type: "大学生IT培训机构"<span>},{name: "传智前端学院"<span>,url: "http://web.itcast.cn"<span>,type: "前端的黄埔军校"<span>}];$(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"<span>).empty();//自杀// $("#J_TbData").remove();for( var i = 0; i < data.length; i++<span> ) {//动态创建一个tr行标签,并且转换成jQuery对象var $trTemp = $("<tr></tr>"<span>);//往行里面追加 td单元格$trTemp.append("<td>"+ data[i].name +"</td>"<span>);$trTemp.append("<td>"+ data[i].url +"</td>"<span>);$trTemp.append("<td>"+ data[i].type +"</td>"<span>);// $("#J_TbData").append($trTemp);$trTemp.appendTo("#J_TbData"<span>);}});
</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.实例截图
动态建表格(来自https://www.cnblogs.com/mr-wuxiansheng/p/6363570.html)相关推荐
- 用jquery根据json动态创建多级菜单导航（by https://www.cnblogs.com/fatty-yu/p/7088955.html）...
HTML结构: <section class="sidebar"></setion> json: 1 { 2 "liClass": &q ...
- 通俗易懂，什么是.NET?什么是.NET Framework？什么是.NET Core? 转自：https://www.cnblogs.com/1996V/p/9037603.html#net1...
通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的概念,先 ...
- FineUIMvc随笔（1）动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...
- Javascript DOM动态添加表格
一次翻译技术文章,本身英语水平很烂,翻译的也是自己刚开始学习的技术,所以能勉强看懂英文的话都要尽量读 原文 而不要看我的翻译,免得被误导.阅读原文 这篇文章简单介绍了DOM 1.0一些基本而强大的方法 ...
- layui 动态添加 表格数据
静态表格: <table class="layui-table" id="table" lay-filter="table">& ...
- JS实现动态生成表格并提交表格数据向后端 表格中数据转为json
原文地址 需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
- 如何优化页面的响应速度 以及如何减少项目初次加载时间（转https://www.cnblogs.com/MarcoHan/p/5295398.html）...
Web前端性能优化--如何提高页面加载速度 前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研 ...
- javascript动态创建表格：新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
- 动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据...
动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据:由存储过程决定,如果编写的存储过程可以生成需要呈现的表格则直接绑定,否则要动态生成表格 转载于:https://www. ...
最新文章
- 帮朋友招聘赴北京微软ASP.NET开发工程师
- html经过一段时间自动交换图像,Dreamweaver交换行为：实现图像交换
- Java中泛型的各种使用
- cornerstone的简单使用
- python 连 mongodb
- chrome扩展程序_如何创建Chrome扩展程序
- nginx 二进制包安装mysql_二进制安装mysql5.7
- javascript总for of和for in的区别？
- android studio 布局设计,Andriod界面设计适配和Android Studio中的资源
- 《程序员修炼之道》---- 修的是什么
- Centos7 firewall防火墙常用配置
- eclipse中jsp页面 page报错问题
- SSD固态硬盘检测工具AS SSD参数
- python 3.6 安装 win32 win32com模块
- 【微信小程序】实现手机全屏滚动字幕
- 如何使用串口来给STM32下载程序
- c# 中崎_C#版OPOS打印(基于北洋OPOS SDK二次开发包,支持EPSON和北洋、佳博、商祺等支持标准ESC/POS指令的POS打印机) | 学步园...
- sweetalert加载弹窗定时自动关闭
- php人机验证,89.人机验证（一） |《TDD 构建 Laravel 论坛笔记》| Laravel China 社区...
- android报错:Only the original thread that created a view hierarchy can touch its views.