Jquery는 테이블 열을 작동하고 테이블을 정렬합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Jquery는 테이블 열을 작동하고 테이블을 정렬합니다.

php中世界最好的语言

Apr 25, 2018 am 10:18 AM

jquery 작동하다

이번에는 Jquery를 사용하여 테이블 열을 조작하고 테이블을 정렬하는 방법을 알려드리겠습니다. Jquery에서 테이블 열을 조작하고 테이블을 정렬할 때 주의사항은 무엇인가요?

이 구현의 주요 아이디어는 마우스로 클릭한 헤더 셀의 열 번호를 가져오고, 데이터 행을 탐색하고, 각 에서 HTML을 가져오고, 각 태그에 있는 내용과 태그의 유형 속성 값을 얻을 수 있습니다. 정렬을 위한 Jquery 플러그인이 많이 있습니다. 예를 들어 Jquery 데이터 테이블은 테이블에 대한 정렬, 검색, 페이징 및 기타 작업을 수행할 수 있지만 구현 원리를 주의 깊게 연구하지 않았습니다.

프런트 엔드에서 테이블 정렬 원리를 더 잘 이해하고 Jquery를 더 배우기 위해 Jquery를 사용하여 테이블 정렬이라는 작은 기능을 구현하기로 결정했습니다.

이 구현의 주요 아이디어는 마우스로 클릭한 헤더 셀의 열 번호를 가져오고, 데이터 행을 탐색하고, 각 에서 HTML을 가져오고, 각 아래에 해당하는 열을 가져오는 것입니다. label 숫자의 태그에 있는 내용을 가져오고, 태그의 유형 속성 값을 가져옵니다. 의 속성 값이 문자로 이어집니다. 문자열이 배열 배열에 추가된 다음 테이블의 모든 HTML이 숨겨집니다. 다른 유형 속성 값에 따라 배열 배열이 비교 결과에 따라 정렬됩니다. 그런 다음 정렬된 배열 요소를 빈 에 다시 할당합니다. 열이 이미 정렬된 경우 배열을 직접 반전합니다. 숫자, 문자열, IP 주소 등 세 가지 유형의 정렬 규칙이 제공됩니다. 문자열 유형 정렬 규칙은 한자 문자열 정렬을 지원하는 JavaScript의 localeCompare 메서드를 사용하지만 이 메서드는 Google Chrome과 호환되지 않습니다. 따라서 Google Chrome의 한자 문자열 정렬 결과가 올바르지 않게 됩니다.

HTML 코드 목록
:

View Code 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> 表格排序 </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content="tschengbin"> 
<meta name="Keywords" content="jquery tableSort"> 
<meta name="Description" content=""> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="tableSort.js"></script> 
<style type="text/css"> 
p{ 
width: 1024px; 
margin: 0 auto;/*p相对屏幕左右居中*/ 
} 
table{ 
border: solid 1px #666; 
border-collapse: collapse; 
width: 100%; 
cursor: 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> 
</head> 
<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> 

tableSort.js代码清单：
复制代码 代码如下:

View Code 
$(document).ready(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所在的列号 
$(this).mouseover(function(){ 
tbBodyTr.each(function(){//编列tbody下的tr 
var tds = $(this).find("td");//获取列号为参数index的td对象集合 
$(tds[thisIndex]).addClass("hover"); 
}); 
}).mouseout(function(){ 
tbBodyTr.each(function(){ 
var tds = $(this).find("td"); 
$(tds[thisIndex]).removeClass("hover"); 
}); 
}); 
$(this).click(function() { 
var dataType = $(this).attr("type"); 
checkColumnValue(thisIndex, dataType); 
}); 
}); 
$("tbody tr").removeClass();//先移除tbody下tr的所有css类 
$("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;); 
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++){ 
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; 
} 
})

로그인 후 복사

실행 결과:

Jquery는 테이블 열을 작동하고 테이블을 정렬합니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요. !

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

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

7518

Cakephp 튜토리얼

1378

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

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Linux Deploy 작업 단계 및 주의사항 Mar 14, 2024 pm 03:03 PM

LinuxDeploy 작업 단계 및 주의 사항 LinuxDeploy는 사용자가 Android 장치에 다양한 Linux 배포판을 신속하게 배포하여 모바일 장치에서 완전한 Linux 시스템을 경험할 수 있도록 도와주는 강력한 도구입니다. 이 기사에서는 LinuxDeploy의 작동 단계와 주의 사항을 자세히 소개하고 독자가 이 도구를 더 잘 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 작업 단계: Linux 설치배포: 먼저 설치

Huawei Mate60 Pro 스크린샷 작업 단계 공유 Mar 23, 2024 am 11:15 AM

스마트폰이 대중화되면서 스크린샷 기능은 일상적인 휴대폰 사용에 필수적인 기술 중 하나로 자리 잡았습니다. Huawei의 주력 휴대폰 중 하나인 Huawei Mate60Pro의 스크린샷 기능은 자연스럽게 사용자로부터 많은 관심을 끌었습니다. 오늘은 모두가 더욱 편리하게 스크린샷을 찍을 수 있도록 Huawei Mate60Pro 휴대폰의 스크린샷 작업 단계를 공유하겠습니다. 우선, Huawei Mate60Pro 휴대폰은 다양한 스크린샷 방법을 제공하며, 개인 습관에 따라 자신에게 맞는 방법을 선택할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 차단에 대한 자세한 소개입니다.

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. &lt

PHP 문자열 조작: 공백을 효과적으로 제거하는 실용적인 방법 Mar 24, 2024 am 11:45 AM

PHP 문자열 작업: 공백을 효과적으로 제거하는 실용적인 방법 PHP 개발 시 문자열에서 공백을 제거해야 하는 상황에 자주 직면하게 됩니다. 공백을 제거하면 문자열이 더 깔끔해지고 후속 데이터 처리 및 표시가 쉬워집니다. 이 기사에서는 공백을 제거하는 몇 가지 효과적이고 실용적인 방법을 소개하고 구체적인 코드 예제를 첨부합니다. 방법 1: PHP 내장 함수인 Trim()을 사용합니다. PHP 내장 함수인 Trim()을 사용하면 문자열 양쪽 끝의 공백(공백, 탭, 개행 등 포함)을 제거할 수 있어 매우 편리하고 쉽습니다. 사용.

Ele.me에서 WeChat을 연결하는 방법 Apr 01, 2024 pm 03:46 PM

Ele.me는 다양한 종류의 음식을 온라인으로 선택하고 주문할 수 있는 소프트웨어입니다. 판매자는 주문을 받은 후 즉시 주문을 처리합니다. 사용자는 소프트웨어를 통해 WeChat을 연결할 수 있습니다. 작동 방법을 알아보려면 PHP 중국어 웹사이트를 확인하세요. Ele.me를 WeChat에 바인딩하는 방법: 1. 먼저 Ele.me 소프트웨어를 열고 홈페이지에 들어간 후 오른쪽 하단에 있는 [내]를 클릭합니다. 2. 그런 다음 내 페이지에서 [계정]을 클릭합니다. ] 왼쪽 상단에 있는 3. 그런 다음 휴대폰, WeChat, Alipay 및 Taobao를 연결할 수 있는 개인 정보 페이지로 이동합니다. 4. 마지막 클릭 후 필요한 WeChat 계정을 선택합니다. WeChat 인증 페이지에 접속하고 [허용]을 클릭하세요.

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

Astar 스테이킹 원칙, 수입 해체, 에어드랍 프로젝트 및 전략 및 운영 보모 수준 전략 Jun 25, 2024 pm 07:09 PM

목차 Astar Dapp 스테이킹 원리 스테이킹 수익 잠재적 에어드랍 프로젝트 해체: AlgemNeurolancheHealThreeAstar Degens DAOVeryLongSwap 스테이킹 전략 및 운영 "AstarDapp 스테이킹"이 올해 초 V3 버전으로 업그레이드되었으며 스테이킹 수익에 많은 조정이 이루어졌습니다. 규칙. 현재 첫 번째 스테이킹 주기는 종료되었으며 두 번째 스테이킹 주기의 "투표" 하위 주기가 막 시작되었습니다. '추가 보상' 혜택을 받으려면 이 중요한 단계(6월 26일까지 지속 예정, 5일 미만 남았음)를 파악해야 합니다. 아스타 스테이킹 수익을 자세하게 분석해보겠습니다.

See all articles