前端---json数据生成表格、列内容排序

最新推荐文章于 2023-03-03 15:15:43 发布

铃兰_

最新推荐文章于 2023-03-03 15:15:43 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45881192/article/details/104201922

版权

前端获取到了一个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"

最低0.47元/天解锁文章

铃兰_

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端---json数据生成表格、列内容排序

前端获取到了一个json字符串: 将字符串的内容呈现到页面上:要求如下:1.将学生信息添加到html页面:其中: id为序号,name为名字,age为年龄,sex为性别,claNum为班级号,schoolNum为学号,counselor为咨询老师,telephone为电话,dateOfBirth为生日;2.在年龄,性别,班级号旁边添加点击按钮,该按钮能够实现对表格中的内容进行排序,如点...
复制链接

扫一扫