<!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. ［设计模式］访问者 Visitor 模式

    访问者模式是对象的行为模式. 访问者模式的目的是封装一些施加于某种数据结构元素之上的操作.一旦这些操作需要修改的话,接受这个操作的数据结构则可以保持不变.

  2. git 上传本地代码到远程仓库

    未经允许,禁止转载! 查看哪些文件被修改过:git status 查看具体的修改内容:git diff 对新添加的文件进行添加:git add 文件名 提交修改标记:git commit -m &qu ...

  3. table实现 js数据访问 传递json数据用render_to_response

    $(document).ready(function(){ $.ajax({ url:'/query/', dataType:'json', type:'GET', success:function( ...

  4. window.event.keycode值大全

    window.event.keycode值大全 event.keycode值大全 1 keycode 8 = BackSpace BackSpace 2 keycode 9 = Tab Tab 3 k ...

  5. Nhibernate工具Profiler配置

    1.使用之前需要确认Framework的Version,如果是4.0那么使用如下程序集需要在 创建ISessionFactory的项目中引用NHProfiler安装目录下的 HibernatingRh ...

  6. module.exports和exports得区别

    对module.exports和exports的一些理解 可能是有史以来最简单通俗易懂的有关Module.exports和exports区别的文章了. exports = module.exports ...

  7. Android LCD

    Android LCD(一):LCD基本原理篇Android LCD(二):LCD常用接口原理篇Android LCD(三):Samsung LCD接口篇Android LCD(四):LCD驱动调试篇

  8. UEFI引导修复

    一.用bcbboot自动修复 我们建议大家启动64位8PE,用它带的bcdboot来修复. (一)指定esp分区修复 环境为64位8PE,bios/uefi启动进入下都可以 1.启动64位8PE,并用 ...

  9. Python3：自动发送账单邮件

    Python3:自动发送账单邮件 一.前言 民间借贷,没有信用卡那样,每月会收到账单:为了民间借贷管理更加合理化,写了个还款账单小程序. 二.源码 (1)配置文件代码: [dbmysql] ip = ...

  10. HTML5/CSS3图片左右切换弹性动画

    在线演示 本地下载