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 ...
随机推荐
- mapreduce中获取输入文件的路径
InputSplit inputSplit = context.getInputSplit(); String fileName = ((FileSplit) inputSplit).getPath( ...
- Appium 输入中文
文章出处 http://www.cnblogs.com/ljfight/p/6089163.html 在做app自动化过程中会踩很多坑,咱们都是用中文的app,所以首先要解决中文输入的问题!本篇通过屏 ...
- go——安装与设置
1.下载安装 官方下载地址:https://golang.org/dl/ 备用下载地址:https://golang.google.cn/dl/ 在windows下面直接运行.msi程序文件就可以安装 ...
- .net：easyui-datagrid清空表中原有数据
$("#StudentTable").datagrid("loadData", { total: 0, rows: [] });
- kubernetes --> kube-dns 安装
准备yaml文件: 1.kubedns-cm.yaml # Copyright 2016 The Kubernetes Authors. # # Licensed under the Apache L ...
- JetBrains IntelliJ IDEA 15 Ultimate Edition版本激活破解
由于JetBrains系列新版本注册激活发生了变化,所以原来的激活方式已经不能在使用. 只能用新的方式来破解了.此方式支持所有系列的新版版.包括IDEA15,PHPSTORM10,WEBSTO ...
- python中数据类型转换
python中list和str互转 1.list转str 假设有一个名为test_list的list,转换后的str名为test_str 则转换方法: test_str = "" ...
- 利用C#查看特定服务是否安装
需求:想通过C#代码来查看IIS服务或者MSMQ是否已经安装 分析:IIS服务和MSMQ安装完成后都会创建windows服务,所以我们只需要查看对应的服务是否存在即可. 准备工作: IIS服务名称:W ...
- js自执行函数&扩展方法
我们通常将JS代码写在一个单独的JS文件中,然后在页面中引入该文件.但是,有时候引入后会碰到变量名或函数名与其它JS代码冲突的问题.那么如何解决这个问题呢?作用域隔离.在JS中,作用域是通过函数来划分 ...
- jQuery图片垂直滚动焦点图
在线演示 本地下载