json 和 table控件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑战题</title>
<style>
.ui-table {margin: 20px auto; border-collapse: collapse; font-size: 12px; text-align: center; color: #666;}
.ui-table th, .ui-table td {padding: 4px 8px; border: 1px solid #ccc;}
.ui-table th {background-color: #f0f0f0;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<table class="ui-table" width="800" id="studentInfo">
<caption><h2>XX中学学生资料</h2></caption>
<thead>
<tr>
<th style="width:45px">序号</th>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>年龄</th>
<th>所在班级</th>
<th>富二代</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<input type="button" value="加载资料" onclick="DisplayInfo()">
</td>
</tr>
</tbody>
</table>
<script>
var students = [
{"name": "张三", "id": "00145", "sex": "男", "age": "15", "class": "初一(3)班", "vip": "否"},
{"name": "李四", "id": "00110", "sex": "女", "age": "15", "class": "初二(2)班", "vip": "否"},
{"name": "王五", "id": "00251", "sex": "男", "age": "17", "class": "初一(4)班", "vip": "是"},
{"name": "赵六", "id": "00031", "sex": "女", "age": "16", "class": "初二(3)班", "vip": "否"},
{"name": "吴七", "id": "00009", "sex": "女", "age": "19", "class": "初三(6)班", "vip": "否"},
{"name": "候八", "id": "00352", "sex": "男", "age": "14", "class": "初一(2)班", "vip": "是"},
];
function DisplayInfo() {
var tbody = $("#studentInfo").find("tbody");
tbody.empty();
$.each(students,function(index, el) {
tbody.append(
"<tr><td>" + parseInt(index+1) + "</td><td>" +
el.name + "</td><td>" +
el.id + "</td><td>" +
el.sex + "</td><td>" +
el.age + "</td><td>" +
el.class + "</td><td>" +
el.vip + "</td></tr>");
});
}
</script>
</body>
</html>
json 和 table控件的更多相关文章
- 解决SMARTFORMS 中table 控件单行跨页的问题
在CX项目中,MM模块做了大量的的单据打印的工作,一个问题困扰了我好久,一直不能解决.当物料描述很长时,table控件在单元格中能自动换行,这样就有可能在换页处出现一行记录的一部分打在上一页,一部分记 ...
- HTTP模拟工具【C#/Winform源码】、Json绑定TreeView控件、使用了MetroModernUI、RestSharp、Dapper.Net、Newtonsoft.Json、SmartThreadPool这几个主要开源框架
HTTP模拟工具 开发语言:C#/Winform开发工具:Visual Studio 2017数据库: SQLite使用框架:界面-MetroModernUI Http请 ...
- Table 控件各元素及属性
功能:在Web页中创建通用表格里. 属性: 1.CellPadding属性:用于设置表中单元格的边框和内容之间的距离(以像素为单位).默认为-(未设置). 2.CellSpacing属性:用于设置表中 ...
- [JAVASCRIPT][EXTJS]直接用JSON创建树形控件（Ext.tree.TreePanel ）(转)
直接用JSON创建树形控件(Ext.tree.TreePanel ) 1.创建多个根节点的树形 2.直接使用JsonList创建树形 <!DOCTYPE HTML PUBLIC "-/ ...
- 灵活轻便的Table控件，适合复杂样式的内容排版
github仓库地址 https://github.com/gaoyangclub/GYTableViewController 前言 TableView是在项目开发的时候经常用到的组件,几乎百分之八十 ...
- 基于vue.js实现远程请求json的select控件
基本思路 前端把需要的参数类型编码传到后台,后台返回相应的参数列表json,前端利用vue渲染select控件 具体实现 前端代码 <select v-model="template. ...
- FastReport.Net使用：[21]表格(Table)控件
对表格控件的一些常用操作 合并单元格:选择需要合并的单元格(按住Shitf多选),然后在右键菜单中选择[合并单元格]. 2.删除/插入行 鼠标移到在行头,当鼠标状态变为向右的箭头时点击 ...
- java ，用公司框架写的显示列表 Table控件
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org" lan ...
- Robotium Table控件的处理
HTML代码: <html> <head> <title>Table</title> </head> <body> <ta ...
随机推荐
- PHP逐字符读取数据
<?php $file = fopen("Minot.txt", "r") or exit("Unable to open file!" ...
- PAT 天梯赛 L1-047. 装睡 【水】
题目链接 https://www.patest.cn/contests/gplt/L1-047 AC代码 #include <iostream> #include <cstdio&g ...
- poj2431 一直Wa
在遍历加油站的时候,会将经过的x加油站放入优先队列,之后将x从数组中删掉,即用最后一个加油站来替代x:这时如果不 “i--”,则会漏掉检查原来的stop[n-1],则可能造成错误. if(stop[i ...
- 自定义QSS
/*QComboBox*/ QComboBox {border: 1px solid rgb(111, 156, 207);border-radius: 3px;padding: 1px 18px 1 ...
- Linux(CentOS)中常用软件安装，使用及异常——XManager, 中文支持，JDK
XManager图形化界面远程连接 采用Xshell的方式可以不用在CentOS系统中配置即可以相连,主要原理就是SSH连接的方式,但是XManager图形化界面远程连接是需要修改CentOS系统的. ...
- SDOI2019&十二省联考 游记
差不多写完了,然鹅去长郡学习前忘在机房电脑里了 总之是咕了
- ThinkPHP3.2添加scws中文分词
前言 前一段时间,公司网站做站内搜索,只简单针对输入的文字进行搜索,作全匹配检索,搜索出来的内容很少.如何达到模糊搜索,匹配到更多的内容成了需要解决的问题.于是,今天想到可以做分词检索,如何对输入的一 ...
- Pandas迭代
Pandas对象之间的基本迭代的行为取决于类型.当迭代一个系列时,它被视为数组式,基本迭代产生这些值.其他数据结构,如:DataFrame和Panel,遵循类似惯例迭代对象的键. 简而言之,基本迭代( ...
- java对象的深浅clone
在Java语言中,数据类型分为值类型(基本数据类型)和引用类型,值类型包括int.double.byte.boolean.char等简单数据类型,引用类型包括类.接口.数组等复杂类型. 浅克隆和深克隆 ...
- scala学习手记30 - 闭包
首先要弄白闭包的概念. 教材中的说法是:闭包是一种特殊的函数值,闭包中封闭或绑定了在另一个作用域或上下文中定义的变量.这里说闭包是一种特殊的函数值. 维基百科中的说法是:在计算机科学中,闭包(英语:C ...