端獲取到了一個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"}]
’;
要求如下: 注意界面的樣式,美觀
1. 將學生資訊添加到html頁面: 其中: id為序號,name為名字,age為年齡,sex為性別,claNum為班級號,schoolNum為學號,counselor為咨詢老師,telephone為電話,dateOfBirth為生日;
2. 在年齡,性別,班級號旁邊添加點擊按鈕,該按鈕能夠實作對表格中的內容進行排序,如點擊年齡按鈕,則表格中的資訊按照年齡的升序排列;如下圖所示:
3. 實作每一行的高亮顯示,滑鼠移入某一行的時候,改行背景顏色變成灰色
uj5u.com熱心網友回復：
1，3很簡單，3排序用陣列sort
var str = [
{a: 0, b: 2, c: 3},
{a: 1, b: 1, c: 3},
{a: 8, b: 7, c: 1}
]
// key 排序欄位 type 排序型別 -1倒序 1正序
function sortCell (key, type) {
if (type === '-1') {
str.sort((a,b) => {
return b[key]-a[key]
})
} else {
str.sort((a,b) => {
return a[key]-b[key]
})
}
console.log(str)
}
sortCell('b', '1')
排序后重新生成表格
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/98402.html
標籤：HTML(CSS)