테이블 클릭 sorting_javascript 기술을 구현하는 JavaScript 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

테이블 클릭 sorting_javascript 기술을 구현하는 JavaScript 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:59 PM

javascript

本文实例讲述了JavaScript实现表格点击排序的方法。分享给大家供大家参考。具体分析如下：

这里实现基于JS的表格点击排序效果，可以根据表格内的数据大小自动按顺序排列，股票网站常会见到这种功能。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表格排序</title>
</head>
<STYLE type=text/css>TABLE {
 BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid;
 BORDER-LEFT: #000000 2px solid; BORDER-BOTTOM: #000000 2px solid;
 border-spacing: 0px; cell-spacing: 0px
}
TD {
 PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt;
 PADDING-BOTTOM: 2px; PADDING-TOP: 2px; 
 FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
}
TH {
 PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt;
 PADDING-BOTTOM: 2px; PADDING-TOP: 2px;
 FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
}
TD.numeric {
 TEXT-ALIGN: right
}
TH {
 BACKGROUND-COLOR: #c0c0c0
}
TH.mainHeader {
 COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left
}
TH A {
 COLOR: #000080; TEXT-DECORATION: none
}
TH A:visited {
 COLOR: #000080
}
TH A:active {
 COLOR: #800000; TEXT-DECORATION: underline
}
TH A:hover {
 COLOR: #800000; TEXT-DECORATION: underline
}
TR.alternateRow {
 BACKGROUND-COLOR: #e0e0e0
}
TD.sortedColumn {
 BACKGROUND-COLOR: #f0f0f0
}
TH.sortedColumn {
 BACKGROUND-COLOR: #b0b0b0
}
TR.alternateRow TD.sortedColumn {
 BACKGROUND-COLOR: #d0d0d0
}
</STYLE>
<SCRIPT type=text/javascript>
function sortTable(id, col, rev) {
 var tblEl = document.getElementById(id);
 if (tblEl.reverseSort == null) {
  tblEl.reverseSort = new Array();
  tblEl.lastColumn = 1;
 }
 if (tblEl.reverseSort[col] == null)
  tblEl.reverseSort[col] = rev;
 if (col == tblEl.lastColumn)
  tblEl.reverseSort[col] = !tblEl.reverseSort[col];
 tblEl.lastColumn = col;
 var oldDsply = tblEl.style.display;
 tblEl.style.display = "none";
 var tmpEl;
 var i, j;
 var minVal, minIdx;
 var testVal;
 var cmp;
 for (i = 0; i < tblEl.rows.length - 1; i++) {
  minIdx = i;
  minVal = getTextValue(tblEl.rows[i].cells[col]);
  for (j = i + 1; j < tblEl.rows.length; j++) {
   testVal = getTextValue(tblEl.rows[j].cells[col]);
   cmp = compareValues(minVal, testVal);
   if (tblEl.reverseSort[col])
    cmp = -cmp;
   if (cmp == 0 && col != 1)
    cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1]),
              getTextValue(tblEl.rows[j].cells[1]));
   if (cmp > 0) {
    minIdx = j;
    minVal = testVal;
   }
  }
  if (minIdx > i) {
   tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);
   tblEl.insertBefore(tmpEl, tblEl.rows[i]);
  }
 }
 makePretty(tblEl, col);
 setRanks(tblEl, col, rev);
 tblEl.style.display = oldDsply;
 return false;
}
if (document.ELEMENT_NODE == null) {
 document.ELEMENT_NODE = 1;
 document.TEXT_NODE = 3;
}
function getTextValue(el) {
 var i;
 var s;
 s = "";
 for (i = 0; i < el.childNodes.length; i++)
  if (el.childNodes[i].nodeType == document.TEXT_NODE)
   s += el.childNodes[i].nodeValue;
  else if (el.childNodes[i].nodeType == document.ELEMENT_NODE && 
       el.childNodes[i].tagName == "BR")
   s += " ";
  else
   // Use recursion to get text within sub-elements.
   s += getTextValue(el.childNodes[i]);
 return normalizeString(s);
}
function compareValues(v1, v2) {
 var f1, f2;
 f1 = parseFloat(v1);
 f2 = parseFloat(v2);
 if (!isNaN(f1) && !isNaN(f2)) {
  v1 = f1;
  v2 = f2;
 }
 // Compare the two values.
 if (v1 == v2)
  return 0;
 if (v1 > v2)
  return 1
 return -1;
}
var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
var whtSpMult = new RegExp("\\s\\s+", "g");
function normalizeString(s) {
 s = s.replace(whtSpMult, " "); // Collapse any multiple whites space.
 s = s.replace(whtSpEnds, "");  // Remove leading or trailing white space.
 return s;
}
var rowClsNm = "alternateRow";
var colClsNm = "sortedColumn";
var rowTest = new RegExp(rowClsNm, "gi");
var colTest = new RegExp(colClsNm, "gi");
function makePretty(tblEl, col) {
 var i, j;
 var rowEl, cellEl;
 for (i = 0; i < tblEl.rows.length; i++) {
  rowEl = tblEl.rows[i];
  rowEl.className = rowEl.className.replace(rowTest, "");
  if (i % 2 != 0)
   rowEl.className += " " + rowClsNm;
  rowEl.className = normalizeString(rowEl.className);
  for (j = 2; j < tblEl.rows[i].cells.length; j++) {
   cellEl = rowEl.cells[j];
   cellEl.className = cellEl.className.replace(colTest, "");
   if (j == col)
    cellEl.className += " " + colClsNm;
   cellEl.className = normalizeString(cellEl.className);
  }
 }
 var el = tblEl.parentNode.tHead;
 rowEl = el.rows[el.rows.length - 1];
 for (i = 2; i < rowEl.cells.length; i++) {
  cellEl = rowEl.cells[i];
  cellEl.className = cellEl.className.replace(colTest, "");
  if (i == col)
   cellEl.className += " " + colClsNm;
   cellEl.className = normalizeString(cellEl.className);
 }
}
function setRanks(tblEl, col, rev) {
 var i  = 0;
 var incr = 1;
 if (tblEl.reverseSort[col])
  rev = !rev;
 if (rev) {
  incr = -1;
  i = tblEl.rows.length - 1;
 }
 var count  = 1;
 var rank  = count;
 var curVal;
 var lastVal = null;
 while (col > 1 && i >= 0 && i < tblEl.rows.length) {
  curVal = getTextValue(tblEl.rows[i].cells[col]);
  if (lastVal != null && compareValues(curVal, lastVal) != 0)
    rank = count;
  tblEl.rows[i].rank = rank;
  lastVal = curVal;
  count++;
  i += incr;
 }
 var rowEl, cellEl;
 var lastRank = 0;
 for (i = 0; i < tblEl.rows.length; i++) {
  rowEl = tblEl.rows[i];
  cellEl = rowEl.cells[0];
  while (cellEl.lastChild != null)
   cellEl.removeChild(cellEl.lastChild);
  if (col > 1 && rowEl.rank != lastRank) {
   cellEl.appendChild(document.createTextNode(rowEl.rank));
   lastRank = rowEl.rank;
  }
 }
}
</SCRIPT>
</HEAD>
<BODY>
<!-- Offensive statistics table. -->
<TABLE cellSpacing=0 cellPadding=0 border=0>
 <THEAD>
 <TR>
  <TH class=mainHeader colSpan=11>NFL 2001 Offensive Stats</TH></TR>
 <TR>
  <TH style="TEXT-ALIGN: left">Rank</TH>
  <TH style="TEXT-ALIGN: left"><A title="Team Name" 
   onclick="this.blur(); return sortTable('offTblBdy', 1, false);" 
   href="#">Team</A></TH>
  <TH><SPAN title="Games Played">Gms</SPAN></TH>
  <TH><A title="Total Yards" 
   onclick="this.blur(); return sortTable('offTblBdy', 3, true);" 
   href="#">Yds</A></TH>
  <TH><A title="Yards Per Game" 
   onclick="this.blur(); return sortTable('offTblBdy', 4, true);" 
   href="#">Yds/G</A></TH>
  <TH><A title="Total Rushing Yards" 
   onclick="this.blur(); return sortTable('offTblBdy', 5, true);" 
   href="#">RuYds</A></TH>
  <TH><A title="Rushing Yards Per Game" 
   onclick="this.blur(); return sortTable('offTblBdy', 6, true);" 
   href="#">RuYds/G</A></TH>
  <TH><A title="Total Passing Yards" 
   onclick="this.blur(); return sortTable('offTblBdy', 7, true);" 
   href="#">PaYds</A></TH>
  <TH><A title="Passing Yards Per Game" 
   onclick="this.blur(); return sortTable('offTblBdy', 8, true);" 
   href="#">PaYds/G</A></TH>
  <TH><A title="Total Points Scored" 
   onclick="this.blur(); return sortTable('offTblBdy', 9, true);" 
   href="#">Pts</A></TH>
  <TH><A title="Points Per Game" 
   onclick="this.blur(); return sortTable('offTblBdy', 10, true);" 
   href="#">Pts/G</A></TH></TR></THEAD>
 <TBODY id=offTblBdy>
 <TR>
  <TD class=numeric></TD>
  <TD>Arizona</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>4898</TD>
  <TD class=numeric>306.1</TD>
  <TD class=numeric>1449</TD>
  <TD class=numeric>90.6</TD>
  <TD class=numeric>3449</TD>
  <TD class=numeric>215.6</TD>
  <TD class=numeric>295</TD>
  <TD class=numeric>18.4</TD></TR>
 <TR class=alternateRow>
  <TD class=numeric></TD>
  <TD>Atlanta</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>5070</TD>
  <TD class=numeric>316.9</TD>
  <TD class=numeric>1773</TD>
  <TD class=numeric>110.8</TD>
  <TD class=numeric>3297</TD>

  <TD class=numeric>206.1</TD>
  <TD class=numeric>291</TD>
  <TD class=numeric>18.2</TD></TR>
<TR>
<TD class=numeric></TD>
  <TD>Detroit</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>4994</TD>
  <TD class=numeric>312.1</TD>
  <TD class=numeric>1398</TD>
  <TD class=numeric>87.4</TD>
  <TD class=numeric>3596</TD>
  <TD class=numeric>224.8</TD>
  <TD class=numeric>270</TD>
  <TD class=numeric>16.9</TD></TR>
 <TR class=alternateRow>
  <TD class=numeric></TD>
  <TD>Jacksonville</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>4840</TD>
  <TD class=numeric>302.5</TD>
  <TD class=numeric>1600</TD>
  <TD class=numeric>100.0</TD>
  <TD class=numeric>3240</TD>
  <TD class=numeric>202.5</TD>
  <TD class=numeric>294</TD>
  <TD class=numeric>18.4</TD></TR>
 <TR>
  <TD class=numeric></TD>
  <TD>Kansas City</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>5673</TD>
  <TD class=numeric>354.6</TD>
  <TD class=numeric>2008</TD>
  <TD class=numeric>125.5</TD>
  <TD class=numeric>3665</TD>
  <TD class=numeric>229.1</TD>
  <TD class=numeric>320</TD>
  <TD class=numeric>20.0</TD></TR>
 <TR class=alternateRow>
  <TD class=numeric></TD>
  <TD>Miami</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>4821</TD>
  <TD class=numeric>301.3</TD>
  <TD class=numeric>1664</TD>
  <TD class=numeric>104.0</TD>
  <TD class=numeric>3157</TD>
  <TD class=numeric>197.3</TD>
  <TD class=numeric>344</TD>
  <TD class=numeric>21.5</TD></TR>
 <TR>
  <TD class=numeric></TD>
  <TD>Minnesota</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>5006</TD>
  <TD class=numeric>333.7</TD>
  <TD class=numeric>1523</TD>
  <TD class=numeric>101.5</TD>
  <TD class=numeric>3483</TD>
  <TD class=numeric>232.2</TD>
  <TD class=numeric>287</TD>
  <TD class=numeric>19.1</TD></TR>
 <TR class=alternateRow>
  <TD class=numeric></TD>
  <TD>New England</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>4882</TD>
  <TD class=numeric>305.1</TD>
  <TD class=numeric>1793</TD>
  <TD class=numeric>112.1</TD>
  <TD class=numeric>3089</TD>
  <TD class=numeric>193.1</TD>
  <TD class=numeric>371</TD>
  <TD class=numeric>23.2</TD></TR>
 <TR>
  <TD class=numeric></TD>
  <TD>New Orleans</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>5226</TD>
  <TD class=numeric>326.6</TD>
  <TD class=numeric>1712</TD>
  <TD class=numeric>107.0</TD>
  <TD class=numeric>3514</TD>
  <TD class=numeric>219.6</TD>
  <TD class=numeric>333</TD>
  <TD class=numeric>20.8</TD></TR>
 <TR class=alternateRow>
  <TD class=numeric></TD>
  <TD>New York Giants</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>5335</TD>
  <TD class=numeric>333.4</TD>
  <TD class=numeric>1777</TD>
  <TD class=numeric>111.1</TD>
  <TD class=numeric>3558</TD>
  <TD class=numeric>222.4</TD>
  <TD class=numeric>294</TD>
  <TD class=numeric>18.4</TD></TR>
</TBODY></TABLE>
</BODY>
</HTML>

로그인 후 복사

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7525

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

자바스크립트에서 insertBefore를 사용하는 방법 Nov 24, 2023 am 11:56 AM

사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.

JavaScript 및 WebSocket: 효율적인 실시간 이미지 처리 시스템 구축 Dec 17, 2023 am 08:41 AM

JavaScript는 웹 개발에 널리 사용되는 프로그래밍 언어인 반면 WebSocket은 실시간 통신에 사용되는 네트워크 프로토콜입니다. 두 가지의 강력한 기능을 결합하면 효율적인 실시간 영상 처리 시스템을 만들 수 있습니다. 이 기사에서는 JavaScript와 WebSocket을 사용하여 이 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 첫째, 실시간 영상처리 시스템의 요구사항과 목표를 명확히 할 필요가 있다. 실시간 이미지 데이터를 수집할 수 있는 카메라 장치가 있다고 가정해 보겠습니다.

See all articles

테이블 클릭 sorting_javascript 기술을 구현하는 JavaScript 방법

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제