前端---json数据生成表格、列内容排序
前端获取到了一个json字符串: 将字符串的内容呈现到页面上:
要求如下:
1.将学生信息添加到html页面:
其中: id为序号,name为名字,age为年龄,sex为性别,claNum为班级号,schoolNum为学号,counselor为咨询老师,telephone为电话,dateOfBirth为生日;
2.在年龄,性别,班级号旁边添加点击按钮,该按钮能够实现对表格中的内容进行排序,
如点击年龄按钮,则表格中的信息按照年龄的升序排列;如下图所示:
3.实现每一行的高亮显示,鼠标移入某一行的时候,改行背景颜色变成灰色
方法1： 冒泡
创建html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/JQuery/jquery-1.11.3.js"></script>
<!--先引入jquery 再引入bootstrap-->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
/*tr:hover {
cursor: pointer;
background-color: gray;
}*/
</style>
<script type="text/javascript">
var str =[
{
"age":19,"claNum":"WNCQJ032","counselor":"廖娟","dateOfBirth":"1992-10-10","education":"研究生","id":1,"name":"陈克金","schoolNum":"WNCQ201911023","sex":"男","telephone":"13908996789"},
{
"age":23,"claNum":"WNCQJ033","counselor":"覃玲","dateOfBirth":"1992-10-10","education":"本科生","id":2,"name":"陈浩","schoolNum":"WNCQ201911014","sex":"男","telephone":"13908996789"},
{
"age":15,"claNum":"WNCQJ032","counselor":"高羽","dateOfBirth":"1992-10-10","education":"研究生","id":3,"name":"徐瑞","schoolNum":"WNCQ201911057","sex":"女","telephone":"13908996789"},
{
"age":14,"claNum":"WNCQJ033","counselor":"张曼丽","dateOfBirth":"1992-10-10","education":"专科生","id":4,"name":"易恒","schoolNum":"WNCQ201911006","sex":"男","telephone":"13908996789"},
{
"age":20,"claNum":"WNCQJ034","counselor":"廖娟","dateOfBirth":"1992-10-10","education":"研究生","id":5,"name":"刘基航","schoolNum":"WNCQ201911014","sex":"女","telephone":"13908996789"},
{
"age":19,"claNum":"WNCQJ034","counselor":"高羽","dateOfBirth":"1992-10-10","education":"本科生","id":6,"name":"邓一凡","schoolNum":"WNCQ201911025","sex":"男","telephone":"13908996789"},
{
"age":27,"claNum":"WNCQJ032","counselor":"廖娟","dateOfBirth":"1992-10-10","education":"研究生","id":7,"name":"王渝怀","schoolNum":"WNCQ201911036","sex":"男","telephone":"13908996789"},
{
"age":21,"claNum":"WNCQJ032","counselor":"覃玲","dateOfBirth":"1992-10-10","education":"研究生","id":8,"name":"邹高兴","schoolNum":"WNCQ201911017","sex":"女","telephone":"13908996789"}
];//直接定义为数组 方便以下 遍历数组
//json数据加到页面的表格中：
$(document).ready(function() {
var s = "";
for(var i = 0; i < str.length; i++) {
s="";
for(var key in str[i]){
s=s+""+str[i][key]+" ";
}
s+=" ";
// $("#tab").append(s);
$("tbody").append(s);
}
//对年龄排序：升序=从小到大 :
//思路----
//定义1个json字符串 方便转为对象数组 进行排序
//str2的内容不要换行 否则无法转换
//放在外面，以下3个点击排序都可用
var str2 = '[{"age":19,"claNum":"WNCQJ032","counselor":"廖娟","dateOfBirth":"1992-10-10","education":"研究生","id":1,"name":"陈克金","schoolNum":"WNCQ201911023","sex":"男","telephone":"13908996789"},{"age":23,"claNum":"WNCQJ033","counselor":"覃玲","dateOfBirth":"1992-10-10","education":"本科生","id":2,"name":"陈浩","schoolNum":"WNCQ201911014","sex":"男","telephone":"13908996789"},{"age":15,"claNum":"WNCQJ032","counselor":"高羽","dateOfBirth":"1992-10-10","education":"研究生","id":3,"name":"徐瑞","schoolNum":"WNCQ201911057","sex":"女","telephone":"13908996789"},{"age":14,"claNum":"WNCQJ033","counselor":"张曼丽","dateOfBirth":"1992-10-10","education":"专科生","id":4,"name":"易恒","schoolNum":"WNCQ201911006","sex":"男","telephone":"13908996789"},{"age":20,"claNum":"WNCQJ034","counselor":"廖娟","dateOfBirth":"1992-10-10","education":"研究生","id":5,"name":"刘基航","schoolNum":"WNCQ201911014","sex":"女","telephone":"13908996789"},{"age":19,"claNum":"WNCQJ034","counselor":"高羽","dateOfBirth":"1992-10-10","education":"本科生","id":6,"name":"邓一凡","schoolNum":"WNCQ201911025","sex":"男","telephone":"13908996789"},{"age":27,"claNum":"WNCQJ032","counselor":"廖娟","dateOfBirth":"1992-10-10","education":"研究生","id":7,"name":"王渝怀","schoolNum":"WNCQ201911036","sex":"男","telephone":"13908996789"},{"age":21,"claNum":"WNCQJ032","counselor":"覃玲","dateOfBirth":"1992-10-10","education":"研究生","id":8,"name":"邹高兴","schoolNum":"WNCQ201911017","sex":"女","telephone":"13908996789"}]';
var jsonstr=JSON.parse(str2);//对象数组
$("#agepai").click(function(){
// console.log(jsonstr);
//冒泡排序:
for(var i=0;i<jsonstr.length-1;i++){
for(var j=0;j<jsonstr.length-1-i;j++){
//数组中第i对象 的 "age"属性
//比较后
//直接对第i个对象 和 第i+1个对象 交换
if(jsonstr[j]["age"]>jsonstr[j+1]["age"]){
var temp=jsonstr[j];
jsonstr[j]=jsonstr[j+1];
jsonstr[j+1]=temp;
}
}
}
// console.log(jsonstr);
//经过以上，jsonstr成为已排序完成的 数组 可装进table中
3个排序触发按钮中 都要对排好序的jsonstr重新展现在页面 =重复代码 =抽出成方法：
showJsonstr(jsonstr);
});
//对 班级号 排序：
$("#clapai").click(function(){
for(var i=0;i<jsonstr.length-1;i++){
for(var j=0;j<jsonstr.length-1-i;j++){
if(jsonstr[j]["claNum"].substring(6)>jsonstr[j+1]["claNum"].substring(6)){
var temp=jsonstr[j];
jsonstr[j]=jsonstr[j+1];
jsonstr[j+1]=temp;
}
}
}
showJsonstr(jsonstr);
});
//对性别排序 ： 女士优先
$("#sexpai").click(function(){
for(var i=0;i<jsonstr.length-1;i++){
for(var j=0;j<jsonstr.length-1-i;j++){
var a=0;
var b=0;
if(jsonstr[j]["sex"]=="男"){
a=1;
}
if(a>b){
var temp=jsonstr[j];
jsonstr[j]=jsonstr[j+1];
jsonstr[j+1]=temp;
}
}
}
showJsonstr(jsonstr);
});
//排好序的jsonstr重新展现在页面 的方法：
function showJsonstr(jsonstr){
var myage="";
for(var i=0;i<jsonstr.length;i++){
myage=myage+"";
console.log(jsonstr[i]);
for (var key in jsonstr[i]) {
//此时key为对象的 每个属性
myage=myage+""+jsonstr[i][key]+" ";
}
myage=myage+" ";
}
console.log(myage+"---");
$("tbody").html(myage);
}
});
</script>
</head>
<body>
<table border="1px" id="tab" class="table table-hover">
<thead>
<tr>
<td>年龄<input type="button" value="排序" id="agepai"/></td>
<td>班级号<input type="button" value="排序" id="clapai"/></td>
<td>咨询老师</td>
<td>生日</td>
<td>学历</td>
<td>id</td>
<td>姓名</td>
<td>学号</td>
<td>性别<input type="button" value="排序" id="sexpai"/></td>
<td>电话</td>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
知识补充：
JSON.parse() 方法 对JSON字符串 进行parse=解析
构造由 字符串 描述的 JavaScript值或对象：
const json = '{"result":true, "count":42}';
//const定义的 变量 不可以修改，而且必须初始化。
const obj = JSON.parse(json);//得到obj对象
console.log(obj.count);
// expected output: 42
console.log(obj.result);
// expected output: true
方法2： sort
需要刷新后，才能再次触发click，对其他列排序
不知道为啥
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.sort{
background-color: pink;
}
</style>
<script src="js/JQuery/jquery-1.11.3.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
/*
* 1.将json字符串 的内容先以表格形式 展现在页面
* 同时用bootstrap为其添加悬停改变背景色
* 2.用数组的sort方法 排序
* 3.用join("") 把数组转为字符串 空串间隔=直接转了
*/
$(document).ready(function(){
//获取到 1串json字符串
var str='[{"age":19,"claNum":"WNCQJ032","counselor":"廖娟","dateOfBirth":"1992-10-10","education":"研究生","id":1,"name":"陈克金","schoolNum":"WNCQ201911023","sex":"男","telephone":"13908996789"},{"age":23,"claNum":"WNCQJ033","counselor":"覃玲","dateOfBirth":"1992-10-10","education":"本科生","id":2,"name":"陈浩","schoolNum":"WNCQ201911014","sex":"男","telephone":"13908996789"},{"age":15,"claNum":"WNCQJ032","counselor":"高羽","dateOfBirth":"1992-10-10","education":"研究生","id":3,"name":"徐瑞","schoolNum":"WNCQ201911057","sex":"女","telephone":"13908996789"},{"age":14,"claNum":"WNCQJ033","counselor":"张曼丽","dateOfBirth":"1992-10-10","education":"专科生","id":4,"name":"易恒","schoolNum":"WNCQ201911006","sex":"男","telephone":"13908996789"},{"age":20,"claNum":"WNCQJ034","counselor":"廖娟","dateOfBirth":"1992-10-10","education":"研究生","id":5,"name":"刘基航","schoolNum":"WNCQ201911014","sex":"女","telephone":"13908996789"},{"age":19,"claNum":"WNCQJ034","counselor":"高羽","dateOfBirth":"1992-10-10","education":"本科生","id":6,"name":"邓一凡","schoolNum":"WNCQ201911025","sex":"男","telephone":"13908996789"},{"age":27,"claNum":"WNCQJ032","counselor":"廖娟","dateOfBirth":"1992-10-10","education":"研究生","id":7,"name":"王渝怀","schoolNum":"WNCQ201911036","sex":"男","telephone":"13908996789"},{"age":21,"claNum":"WNCQJ032","counselor":"覃玲","dateOfBirth":"1992-10-10","education":"研究生","id":8,"name":"邹高兴","schoolNum":"WNCQ201911017","sex":"女","telephone":"13908996789"}]';
//转为 json数组
var data=JSON.parse(str);
// console.log(data);
//进入页面 则调用生成1个表格展现
createTable();
//转为 数组，展示在前端页面
function createTable(){
//创建空数组 便于以下存放内容
var arr=[];
//创建1个表格 需要的字符串 放入数组
arr.push("");
//第一排开始：
/**
* 要排序的 列： 年龄、性别、班级号
filed是自定义属性，给3列需要排序的都给上field属性
便于用sort的this.sttr('field')获取到不同的field值 来区分 且age、claNum正好为属性名 便于取出每行此属性值
从而1个方法都可拿来给3个列 排序
*/
arr.push("");
arr.push("年龄 ");
arr.push("班级号 ");
arr.push("咨询老师 ");
arr.push("生日 ");
arr.push("学历 ");
arr.push("序号 ");
arr.push("姓名 ");
arr.push("学号 ");
arr.push("性别 ");
arr.push("电话号码 ");
arr.push(" ");
//第一排结束
//遍历：每排内容
for (var i=0;i<data.length;i++) {
//拿到每个json对象
//用属性 取得 属性值
arr.push("");
for (var key in data[i]) {
// console.log(key);
arr.push("");
arr.push(data[i][key]);
arr.push(" ");
}
arr.push(" ");
}
arr.push("
");
$("#context").html(arr.join(""));
}
//对3列中 某1列 排序：
$(".sort").on("click",function(){
console.log("xxxx");
//click后 获取正被click的 field值以区分
var field=$(this).attr("field");//age、claNum
/**
* 对data数组 中的每个元素排序：
* 调用sort方法 有2个参数 此处为相互比较的2个json对象
* return值为true / >0 升序0123
*/
data.sort(function(a,b){
// var zhi=typeof a[field];
// console.log("取到的值"+zhi);//number
if(typeof a[field] == "number"){
return a[field]>b[field]; //a[age]-b[age]>0
}
//说明是 字符串： 按ASCII字母顺序排序
return a[field].localeCompare(b[field]);
});
//展现表格
createTable();
})
});
</script>
</head>
<body>
<div id="context">
hi
<!--script执行后将hi覆盖-->
</div>
<div>点击列名：年龄、班级号、性别 可排序</div>
</body>
</html>