前端---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/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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"本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！