테이블 정렬 기능의 jquery 구현 공유 예-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

테이블 정렬 기능의 jquery 구현 공유 예

小云云

Jan 22, 2018 pm 04:56 PM

jquerytable기능

이 글은 jQuery를 기반으로 한 페이지 요소 속성의 동적 연산과 마우스 이벤트 응답 관련 기술을 포함한 jquery로 구현된 테이블 정렬 기능을 주로 소개합니다. 모두에게 도움이 되기를 바랍니다.

<!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">
      p
      {
        width: 1024px;
        margin: 0 auto; /*p相对屏幕左右居中*/
      }
      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="jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
      $(function () {
        var tableObject = $(&#39;#tableSort&#39;); //获取id为tableSort的table对象
        var tbHead = tableObject.children(&#39;thead&#39;); //获取table对象下的thead
        var tbHeadTh = tbHead.find(&#39;tr th&#39;); //获取thead下的tr下的th
        var tbBody = tableObject.children(&#39;tbody&#39;); //获取table对象下的tbody
        var tbBodyTr = tbBody.find(&#39;tr&#39;); //获取tbody下的tr
        var sortIndex = -1;
        tbHeadTh.each(function () {//遍历thead的tr下的th
          var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号
          //给表态th增加鼠标位于上方时发生的事件
          $(this).mouseover(function () {
            tbBodyTr.each(function () {//编列tbody下的tr
              var tds = $(this).find("td"); //获取列号为参数index的td对象集合
              $(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式
            });
          }).mouseout(function () {//给表头th增加鼠标离开时的事件
            tbBodyTr.each(function () {
              var tds = $(this).find("td");
              $(tds[thisIndex]).removeClass("hover");//鼠标离开时移除td对象上的样式
            });
          });
          $(this).click(function () {//给当前表头th增加点击事件
            var dataType = $(this).attr("type");//点击时获取当前th的type属性值
            checkColumnValue(thisIndex, dataType);
          });
        });
        $("tbody tr").removeClass(); //先移除tbody下tr的所有css类
        //table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色
        $("tbody tr").mouseover(function () {
          $(this).addClass("hover");
        }).mouseout(function () {
          $(this).removeClass("hover");
        });
        //对表格排序
        function checkColumnValue(index, type) {
          var trsValue = new Array();
          tbBodyTr.each(function () {
            var tds = $(this).find(&#39;td&#39;);
            //获取行号为index列的某一行的单元格内容与该单元格所在行的行内容添加到数组trsValue中
            trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());
            $(this).html("");
          });
          var len = trsValue.length;
          if (index == sortIndex) {
          //如果已经排序了则直接倒序
            trsValue.reverse();
          } else {
            for (var i = 0; i < len; i++) {
              //split() 方法用于把一个字符串分割成字符串数组
              //获取每行分割后数组的第一个值,即此列的数组类型,定义了字符串\数字\Ip
              type = trsValue[i].split(".separator")[0];
              for (var j = i + 1; j < len; j++) {
                //获取每行分割后数组的第二个值,即文本值
                value1 = trsValue[i].split(".separator")[1];
                //获取下一行分割后数组的第二个值,即文本值
                value2 = trsValue[j].split(".separator")[1];
                //接下来是数字\字符串等的比较
                if (type == "number") {
                  value1 = value1 == "" ? 0 : value1;
                  value2 = value2 == "" ? 0 : value2;
                  if (parseFloat(value1) > parseFloat(value2)) {
                    var temp = trsValue[j];
                    trsValue[j] = trsValue[i];
                    trsValue[i] = temp;
                  }
                } else if (type == "ip") {
                  if (ip2int(value1) > ip2int(value2)) {
                    var temp = trsValue[j];
                    trsValue[j] = trsValue[i];
                    trsValue[i] = temp;
                  }
                } else {
                  if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器
                    var temp = trsValue[j];
                    trsValue[j] = trsValue[i];
                    trsValue[i] = temp;
                  }
                }
              }
            }
          }
          for (var i = 0; i < len; i++) {
            $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);
          }
          sortIndex = index;
        }
        //IP转成整型
        function ip2int(ip) {
          var num = 0;
          ip = ip.split(".");
          num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
          return num;
        }
      })
    </script>
<BODY>
  <p>
      <table id="tableSort">
        <thead>
          <tr>
            <th type="number">
              序号
            </th>
            <th type="string">
              书名
            </th>
            <th type="number">
              价格（元）
            </th>
            <th type="string">
              出版时间
            </th>
            <th type="number">
              印刷量（册）
            </th>
            <th type="ip">
              IP
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="hover">
            <td class="sequence">
              1
            </td>
            <td>
              狼图腾
            </td>
            <td>
              29.80
            </td>
            <td>
              2009-10
            </td>
            <td>
              50000
            </td>
            <td>
              192.168.1.125
            </td>
          </tr>
          <tr>
            <td class="sequence">
              2
            </td>
            <td>
              孝心不能等待
            </td>
            <td>
              29.80
            </td>
            <td>
              2009-09
            </td>
            <td>
              800
            </td>
            <td>
              192.68.1.125
            </td>
          </tr>
          <tr>
            <td class="sequence">
              3
            </td>
            <td>
              藏地密码2
            </td>
            <td>
              28.00
            </td>
            <td>
              2008-10
            </td>
            <td>
            </td>
            <td>
              192.102.0.12
            </td>
          </tr>
          <tr>
            <td class="sequence">
              4
            </td>
            <td>
              藏地密码1
            </td>
            <td>
              24.80
            </td>
            <td>
              2008-10
            </td>
            <td>
            </td>
            <td>
              215.34.126.10
            </td>
          </tr>
          <tr>
            <td class="sequence">
              5
            </td>
            <td>
              设计模式之禅
            </td>
            <td>
              69.00
            </td>
            <td>
              2011-12
            </td>
            <td>
            </td>
            <td>
              192.168.1.5
            </td>
          </tr>
          <tr>
            <td class="sequence">
              6
            </td>
            <td>
              轻量级 Java EE 企业应用实战
            </td>
            <td>
              99.00
            </td>
            <td>
              2012-04
            </td>
            <td>
              5000
            </td>
            <td>
              192.358.1.125
            </td>
          </tr>
          <tr>
            <td class="sequence">
              7
            </td>
            <td>
              Java 开发实战经典
            </td>
            <td>
              79.80
            </td>
            <td>
              2012-01
            </td>
            <td>
              2000
            </td>
            <td>
              192.168.1.25
            </td>
          </tr>
          <tr>
            <td class="sequence" onclick="sortArray()">
              8
            </td>
            <td>
              Java Web 开发实战经典
            </td>
            <td>
              69.80
            </td>
            <td>
              2011-11
            </td>
            <td>
              2500
            </td>
            <td>
              215.168.54.125
            </td>
          </tr>
        </tbody>
      </table>
    </p>
 </body>
</html>

작동 효과 다이어그램은 다음과 같습니다.

관련 기사

Python vs. JavaScript : 개발 환경 및 도구Apr 26, 2025 am 12:09 AM

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

JavaScript가 C로 작성 되었습니까? 증거를 검토합니다Apr 25, 2025 am 12:15 AM

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

See all articles