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="加载资料" οnclick="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>
转载于:https://www.cnblogs.com/ZengYunChun/p/5679733.html
json 和 table控件相关推荐
- SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
这是 Jerry 2021 年的第 34 篇文章,也是汪子熙公众号总共第 310 篇原创文章. Jerry 前一篇文章 深入掌握 SAP Fiori Elements 工作原理系列之二:如何给 Fio ...
- 替 ASP.NET 的 Table 控件換裝
(本文撰寫於 ASP.NET 1.x 時期,但觀念.做法亦適用 ASP.NET 2.0) 在 ASP.NET 1.0 中,最火紅的資料顯示控件非 DataGrid 莫屬 (ASP.NET 2.0 的 ...
- ASP.net Table 控件
功能:在Web页中创建通用表. 属性: 1.CellPadding属性:用于设置表中单元格的边框和内容之间的距离(以像素为单位).默认为-1(未设置). 2.CellSpacing属性:用于设置表中单 ...
- LabWindows中Table控件的下拉列的设置
1 先看样式 2 样式设置,双击table,添加列以后,编辑列,选择 Combo box 3 全选一列,无法添加值,只有选中一个单元格才可以添加值 -------->>>--- ...
- Bonita BPM ----- Table 控件的使用方法
目的: 解决table子控件调用数据时无法正常显示数据的问题. 数据模型保存在Tomcat服务器中,每次process执行完一次,相应的Form中的数据就保存在datamodel里面. Header ...
- 关于 SAP UI5 Table 控件中行合并的实现方式
有朋友在我的技术交流群里询问这个问题:如何在 SAP UI5 表格控件里,实现行合并和列合并的效果: 行合并相对来说容易实现: SAP UI5 官方网站上,有现成的实现. 起作用的是 Column t ...
- element-ui 使用table控件绑定的list数据的坑
在table绑定list 数据之后,在属性中再次动态的添加成员属性的时候,就会无效. 比如table中绑定了list 中每一个成员的属性age,但是第一次绑定的时候没有age属性,后面获取age数据的 ...
- 使用ant design的table控件最后一列固定（fixed）遇到的问题
工作以来一直在做2b的项目,因此表单操作,权限设置,一些业务逻辑就做的比较多. 首先介绍下背景:前后端完全分离,前端技术栈使用react+redux+antd,经常是没有视觉设计,全凭产品需求文档·· ...
- ASP.NET中table控件去掉 td 之前的间隔
通过css设置了td的边框,发现之间存在间隔. 解决方法: table{ border-collapse:collapse; } 设置td边框是因为设置table的边框只有最外面一圈,而不是每行每列都 ...
最新文章
- rhino-java中调用javascript
- Exchange2010配置-设置OWA身份验证及重定向
- 微信小程序将页面按钮悬浮固定在底部
- yii 字段验证的使用
- 单片机小白学步系列（十八） 单片机/计算机系统概述：通信接口与协议
- EntityFramework Core 3.x添加查询提示（NOLOCK）
- Deeplearning4j 手写体数字识别
- mysql垃圾清理_mysql 垃圾图片清理
- javascript实现较全功能注册表单
- 晨哥真有料丨聊天不努力，脱单没有你！
- ofo 被爆仍在自动续费；苹果加紧培养新一代接班人；谷歌推出 Android 11 Go | 极客头条...
- 关于MySQL的存储函数(自定义函数)的定义和使用方法详解
- python数学符号表示方法_用Python学数学之Sympy代数符号运算
- 非模式对话框CreateDialog() 与 模式对话框 DialogBoxParam()和...
- vscode安装程序员鼓励师插件
- 【转载】Android 中东阿拉伯语适配，看这一篇够了。
- 华为手机获取root权限
- 纤亿通带你了解GPON和EPON的区别
- 分布式数据库同步系统之Otter
- 分析ajax爬取果壳网