当前位置:首页 >> 网络编程

jquery实现的table排序功能示例

本文实例讲述了jquery实现的table排序功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
  <style type="text/css">
      div
      {
        width: 1024px;
        margin: 0 auto; /*div相对屏幕左右居中*/
      }
      table
      {
        border: solid 1px #666;
        border-collapse: collapse;
        width: 100%;
        cursor: default; /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,default默认光标(通常是一个箭头)*/
      }
      tr
      {
        border: solid 1px #666;
        height: 30px;
      }
      table thead tr
      {
        background-color: #ccc;
      }
      td
      {
        border: solid 1px #666;
      }
      th
      {
        border: solid 1px #666;
        text-align: center;
        cursor: pointer; /*光标呈现为指示链接的指针(一只手)*/
      }
      .sequence
      {
        text-align: center;
      }
      .hover
      {
        background-color: #3399FF;
      }
    </style>
<SCRIPT type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">

运行效果图如下:

jquery实现的table排序功能示例

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。