Jquery操作表格列以及对表格排序
这次给大家带来Jquery操作表格列以及对表格排序，Jquery操作表格列以及对表格排序的注意事项有哪些，下面就是实战案例，一起来看一下。
该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个
在前端对表格排序的Jquery插件有很多，功能也很强大，比如说Jquery Data Tables对表格的处理就相当强大，可对表格进行排序，搜索，分页等操作，不过没有仔细研究过其实现原理。
为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习Jquery，所以决定用Jquery来实现一个对表格进行排序的小功能。
该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个
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 = $('#tableSort');//获取id为tableSort的table对象
var tbHead = tableObject.children('thead');//获取table对象下的thead
var tbHeadTh = tbHead.find('tr th');//获取thead下的tr下的th
var tbBody = tableObject.children('tbody');//获取table对象下的tbody
var tbBodyTr = tbBody.find('tr');//获取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('td');
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;
}
})运行结果： 
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
详解JSON.parse()与JSON.stringify()的区别以及使用方法
Atas ialah kandungan terperinci Jquery操作表格列以及对表格排序. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Langkah-langkah operasi dan langkah berjaga-jaga Deploy Linux
Mar 14, 2024 pm 03:03 PM
Langkah pengendalian dan langkah berjaga-jaga LinuxDeploy LinuxDeploy ialah alat berkuasa yang boleh membantu pengguna menggunakan pelbagai pengedaran Linux dengan pantas pada peranti Android, membolehkan pengguna mengalami sistem Linux yang lengkap pada peranti mudah alih mereka. Artikel ini akan memperkenalkan langkah pengendalian dan langkah berjaga-jaga LinuxDeploy secara terperinci dan memberikan contoh kod khusus untuk membantu pembaca menggunakan alat ini dengan lebih baik. Langkah-langkah operasi: Pasang LinuxDeploy: Pertama, pasang
Perkongsian langkah operasi tangkapan skrin Huawei Mate60 Pro
Mar 23, 2024 am 11:15 AM
Dengan populariti telefon pintar, fungsi tangkapan skrin telah menjadi salah satu kemahiran penting untuk kegunaan harian telefon bimbit. Sebagai salah satu telefon mudah alih utama Huawei, fungsi tangkapan skrin Huawei Mate60Pro secara semula jadi telah menarik banyak perhatian daripada pengguna. Hari ini, kami akan berkongsi langkah operasi tangkapan skrin telefon mudah alih Huawei Mate60Pro, supaya semua orang boleh mengambil tangkapan skrin dengan lebih mudah. Pertama sekali, telefon bimbit Huawei Mate60Pro menyediakan pelbagai kaedah tangkapan skrin, dan anda boleh memilih kaedah yang sesuai dengan anda mengikut tabiat peribadi anda. Berikut ialah pengenalan terperinci kepada beberapa pemintasan yang biasa digunakan:
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Feb 28, 2024 pm 03:12 PM
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <
Manipulasi rentetan PHP: cara praktikal untuk mengalih keluar ruang dengan berkesan
Mar 24, 2024 am 11:45 AM
Operasi Rentetan PHP: Kaedah Praktikal untuk Mengalih Keluar Ruang Secara Berkesan Dalam pembangunan PHP, kita sering menghadapi situasi di mana kita perlu mengalih keluar ruang daripada rentetan. Mengalih keluar ruang boleh menjadikan rentetan lebih bersih dan memudahkan pemprosesan dan paparan data seterusnya. Artikel ini akan memperkenalkan beberapa kaedah yang berkesan dan praktikal untuk mengalih keluar ruang, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan fungsi PHP terbina dalam trim() fungsi terbina dalam PHP boleh mengalih keluar ruang pada kedua-dua hujung rentetan (termasuk ruang, tab, baris baharu, dsb.), yang sangat mudah dan mudah. untuk menggunakan.
Bagaimana untuk mengikat WeChat pada Ele.me
Apr 01, 2024 pm 03:46 PM
Ele.me ialah perisian yang menghimpunkan pelbagai makanan istimewa yang berbeza Anda boleh memilih dan membuat pesanan secara dalam talian kaedah operasi , ingat untuk menyemak laman web PHP Cina. Arahan tentang cara mengikat WeChat ke Ele.me: 1. Mula-mula buka perisian Ele.me, dan selepas memasuki halaman utama, kita klik [My] di sudut kanan bawah 2. Kemudian di halaman Saya, kita perlu klik [Akaun] di penjuru kiri sebelah atas; yang perlu diikat dalam halaman kebenaran WeChat dan klik Hanya [Benarkan];
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:
Prinsip pertaruhan Astar, pembongkaran pendapatan, projek dan strategi airdrop & strategi peringkat pengasuh operasi
Jun 25, 2024 pm 07:09 PM
Jadual Kandungan Prinsip Staking Astar Dapp Staking Hasil Pembongkaran Projek Airdrop Berpotensi: AlgemNeurolancheHealthreeAstar Degens DAOVeryLongSwap Staking Strategi & Operasi "AstarDapp Staking" telah dinaik taraf kepada versi V3 pada awal tahun ini, dan banyak pelarasan telah dibuat pada staking peraturan. Pada masa ini, kitaran pertaruhan pertama telah tamat, dan kitaran kecil "pengundian" kitaran pertaruhan kedua baru sahaja bermula. Untuk mendapatkan faedah "ganjaran tambahan", anda perlu memahami peringkat kritikal ini (dijangka akan berlangsung sehingga 26 Jun, berbaki kurang daripada 5 hari). Saya akan memecahkan pendapatan pertaruhan Astar secara terperinci,
