<!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控件的更多相关文章

  1. 解决SMARTFORMS 中table 控件单行跨页的问题

    在CX项目中,MM模块做了大量的的单据打印的工作,一个问题困扰了我好久,一直不能解决.当物料描述很长时,table控件在单元格中能自动换行,这样就有可能在换页处出现一行记录的一部分打在上一页,一部分记 ...

  2. HTTP模拟工具【C#/Winform源码】、Json绑定TreeView控件、使用了MetroModernUI、RestSharp、Dapper.Net、Newtonsoft.Json、SmartThreadPool这几个主要开源框架

    HTTP模拟工具 开发语言:C#/Winform开发工具:Visual Studio 2017数据库:   SQLite使用框架:界面-MetroModernUI              Http请 ...

  3. Table 控件各元素及属性

    功能:在Web页中创建通用表格里. 属性: 1.CellPadding属性:用于设置表中单元格的边框和内容之间的距离(以像素为单位).默认为-(未设置). 2.CellSpacing属性:用于设置表中 ...

  4. [JAVASCRIPT][EXTJS]直接用JSON创建树形控件（Ext.tree.TreePanel ）(转)

    直接用JSON创建树形控件(Ext.tree.TreePanel ) 1.创建多个根节点的树形 2.直接使用JsonList创建树形 <!DOCTYPE HTML PUBLIC "-/ ...

  5. 灵活轻便的Table控件，适合复杂样式的内容排版

    github仓库地址 https://github.com/gaoyangclub/GYTableViewController 前言 TableView是在项目开发的时候经常用到的组件,几乎百分之八十 ...

  6. 基于vue.js实现远程请求json的select控件

    基本思路 前端把需要的参数类型编码传到后台,后台返回相应的参数列表json,前端利用vue渲染select控件 具体实现 前端代码 <select v-model="template. ...

  7. FastReport.Net使用：[21]表格(Table)控件

    对表格控件的一些常用操作 合并单元格:选择需要合并的单元格(按住Shitf多选),然后在右键菜单中选择[合并单元格].         2.删除/插入行 鼠标移到在行头,当鼠标状态变为向右的箭头时点击 ...

  8. java ，用公司框架写的显示列表 Table控件

    <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org" lan ...

  9. Robotium Table控件的处理

    HTML代码: <html> <head> <title>Table</title> </head> <body> <ta ...

随机推荐

  1. SQL基础一

    一.什么是SQL? SQL是结构化查询语言 SQL使我们有能力访问数据库 SQL是一种ANSI的标准计算机语言 二.SQL能做什么? SQL 面向数据库执行查询 SQL 可从数据库取回数据 SQL 可 ...

  2. 常用的Issue解决方案(EF框架)

    1.提交出错:ObjectStateManager 中已存在具有同一键的对象.    ObjectStateManager 无法跟踪具有相同键的多个对象. 遇到此问题,首先要确定的是主键是否赋值,以及 ...

  3. ArcEngine开发中“错误类型"****"未定义构造函数”

    from:http://blog.csdn.net/mengdong_zy/article/details/8990593 问题 在ArcEngine开发的时候,在编译时,发现出现这样的错误,出错的地 ...

  4. .net：easyui-datagrid清空表中原有数据

    $("#StudentTable").datagrid("loadData", { total: 0, rows: [] });

  5. 如何优雅地使用 Stack Overflow

    链接:https://www.zhihu.com/question/20824615/answer/69560657 来源:转载 一,提问前一定要搜索,先在 Google 搜索,然后在 StackOv ...

  6. UVALive 6915 J - Leveling Ground

    思路: 简单模拟下.从左向右扫描一次,求出挖出该区间空地的花费,并取个最小值即可. 至于怎么求区间内的高度最小值,就用线段树就好了. #include <bits/stdc++.h> #d ...

  7. overflow应用场景

    overflow属性可以设置的值有5种: (1)visible  默认值,内容不会裁剪,呈现在元素框之外: (2)hidden 内容会被裁剪,并且子元素内容是不可见的: (3)scroll 内容会被裁 ...

  8. IIS DirectoryEntry

    DirectoryEntry是.Net给我们的一大礼物,他的名字我们就知道他的功能--目录入口.使用过ADSI的人都知道操作IIS,WinNT这些时,我们还需要提供他们的Path,操作IIS时,这个P ...

  9. Address already in use: make_sock: could not bind to address [::]:80

    **********************************************************处理办法:# ps -aux | grep httpWarning: bad syn ...

  10. 统计mysql数据库中数据表/字段等数量的sql

    1.查询一个表中有多少个字段: SELECT COUNT(*) FROM information_schema. COLUMNSWHERE table_schema = '数据库名'AND table ...