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>

时间: 2024-10-05 22:29:13

json 和 table控件的相关文章

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

HTTP模拟工具 开发语言:C#/Winform开发工具:Visual Studio 2017数据库:   SQLite使用框架:界面-MetroModernUI              Http请求-RestSharp              ORM-Dapper.Net              Json解析-Newtonsoft.Json              多线程-SmartThreadPool本来打算试一下Dapper.Net扩展框架-DapperExtensions,用了有

Unity编辑器开发:官方风格的Table控件

Unity编辑器开发:官方风格的Table控件 Table控件能够非常直观地展现批量的数据.在Unity中,Light Explorer就是一个典型的具有Table控件的窗口. 如上图所示,窗口上方是4个TabButton.下面就是一个Table.这个Table功能非常强大,有列表,排序,筛选,实时同步数据更新,实时同步选择等功能. 在Unity项目开发中,也常常需要做这种Table数据的展示或者类似的功能,比如简单的一个需求,找出当前场景中所有的Camra,并显示它的某些属性.用Table控件

MFC——table控件的使用

table控件的使用创建自定义table类,继承自CTabCtrl 类向导,添加MFC类 创建CMyTab类 给tab控件添加变量,变量类型为刚才创建的自定义类 给tab控件添加标签 void CMyTab::PreSubclassWindow(){// TODO: 在此添加专用代码和/或调用基类InsertItem(0, L"A");InsertItem(1, L"B");InsertItem(2, L"C");CTabCtrl::PreSub

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

基本思路 前端把需要的参数类型编码传到后台,后台返回相应的参数列表json,前端利用vue渲染select控件 具体实现 前端代码 <select v-model="template.type" class="form-control"> <option value="">请选择...</option> <option v-for="option in options" v-bind:

Robotium Table控件的处理

HTML代码: 1 <html> 2 <head> 3 <title>Table</title> 4 </head> 5 <body> 6 <table border="1" id="myTable"> 7 <tr> 8 <th>列标题A(1 ,1)</th> 9 <th>列标题B(1 ,2)</th> 10 <th&

关于div 浮动在select,或table控件之上

<div style="position:absolute; display:none; z-index:99999" id="d3" onmouseover="show()" onmouseout="hidden();"> <iframe style="width:100%;filter:alpha(opacity=0);-moz-opacity:0; height:185px; position

获取table控件的某行某列

<script type="text/javascript"> $(document).ready(function(){ //使用keyup事件获取按下的动作 $("input").keyup(function(){//获取tr长度 var leng=$("#id tr").length; //循环获取tr行数 for(var tr=1;tr<=leng;tr++) { var nin=$("#id").f

Atitit. BigConfirmTips 控件 大数据量提示确认控件的原理and总结O9

Atitit. BigConfirmTips 控件 大数据量提示确认控件的原理and总结O9 1. 主要的涉及的技术 1 2. 主要的流程 1 3. 调用法new confirmO9t(); 1 4. 设置确认在后的回溯事件 c.backHandle="window.opener.confirmSubmitBackeventHandle"; 2 5. 设置详细表格显示模板  c.tmplt="/publish/lookOverdetail_templt.jsp";

Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结

Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结 1. 服务端table控件的几个流程周期 1 1.1. 确认要显示的字段(开始渲染) 1 1.2. 确认要显示的title 1 1.3. 格式化 1 2. Render显示级别 1 2.1. 简单化...grid.toHTML(); 1 2.2. 有些设置(title,field) 1 2.3. 完全的的设置(模板机制) 1 3. 服务器端控件跟模板的分离实现 2