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 ...
随机推荐
- 关于\r和\n的区别
回车和换行来源 在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以打10个字符.但是它有一个问题,就是打完一行换行的时候,要用去0.2秒,正好可以打两 ...
- Deep learning Reading List
本文来自:http://jmozah.github.io/links/ Following is a growing list of some of the materials i found on ...
- POJ - 2942 Knights of the Round Table (点双联通分量+二分图判定)
题意:有N个人要参加会议,围圈而坐,需要举手表决,所以每次会议都必须是奇数个人参加.有M对人互相讨厌,他们的座位不能相邻.问有多少人任意一场会议都不能出席. 分析:给出的M条关系是讨厌,将每个人视作点 ...
- rest字符串匹配模式-初次实现方案
一般的rest访问的路径如同这样的路径 http://localhost:8080/AppName/{class}/{method}/{param1}/{param2}... rest的方法分:POS ...
- Nginx 配置文件重写
nginx主配置文件 1.清空过Nginx配置文件,修改: vim /usr/local/nginx/conf/nginx.conf # 以那个账户,账户组来运行nginx user nobody n ...
- Spring Boot JDBC 连接数据库
文本将对在Spring Boot构建的Web应用中,基于MYSQL数据库的几种数据库连接方式进行介绍. 包括JDBC.JPA.MyBatis.多数据源和事务. JDBC 连接数据库 1.属性配置文件( ...
- springboot创建多环境profile打包
springboot开发打包时,一般会有多个环境,dev,qa,prod等,配置文件大多雷同,只是方便开发切换,但是生成部署时产生的war包就无需这么多重复配置了,这时这些dev,qa的配置就不应该打 ...
- LeetCode——Find All Numbers Disappeared in an Array
LeetCode--Find All Numbers Disappeared in an Array Question Given an array of integers where 1 ≤ a[i ...
- mysql入门语句
连接 1.mysql -h localhost -u root -p ******(回车) 2.mysql -h localhost -u root -p(回车) ****** 3.mysql -u ...
- struts2——文件下载（简单的功能）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...