使用jquery排序表，没有其他插件 [英] Sorting table with just jquery, no other plugins
本文介绍了使用jquery排序表，没有其他插件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
到目前为止，我已经得到了这段代码：
$（'。link-sort-table'）。click（function（function） e）{var $ sort = this; var $ table = $（'＃sort-table'）; var $ rows = $（'tbody> tr'，$ table）; $ rows.sort（function（a，b） ）{var keyA = $（'td：eq（0）'，a）.text（）; var keyB = $（'td：eq（0）'，b）.text（）; if（$（$ sort） ）.hasClass（'asc'））{return（keyA> keyB）？1：-1;} else {return（keyA< keyB）？1：-1;}}）; $ .each（$ rows， function（index，row）{$ table.append（row）;}）; e.preventDefault（）;}）;
thead {color：green; } tbody {color：blue; } tfoot {color：red;} table，th，td {border：1px solid black; }
< script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.0.3 / jquery.min.js>< / script><！DOCTYPE HTML>< html>< head>< / head>< body> ; < table id =sort-tablecellpadding =5cellspacing =2border =0> < THEAD> < TR> < th align =left>排序：< a href =＃class =link-sort-table asc> A-Z< / a> < a href =＃class =link-sort-table desc> Z-A< / a> < /第> <的第i; Filme< /第> <的第i; Seriale< /第> <的第i;软骨< /第> < / TR> < / THEAD> < TFOOT> < TR> < TD→1< / TD> < TD> 2'; / TD> < TD> 3'; / TD> < TD> 4℃; / TD> < / TR> < / TFOOT> < TBODY> < TR> < td> Sprinter Cell< / td> < td>火星人< / td> < td>我的名字是Earl< / td> < td> Harry Potter< / td> < / TR> < TR> < td>古墓丽影< / td> < TD>启< / TD> < td>大爆炸理论< / td> < td>休闲空缺< / td> < / TR> < TR> < td>需要Speer< / td> < TD>泰德< / TD> < TD>超人< / TD> < td> Fiddy shades< / td> < / TR> < TR> < td>反恐精英< / td> < TD>无限< / TD> < td> One-Punch Man< / td> < TD> Morometii< / TD> < / TR> < TR> < td>半衰期< / td> < TD>像素< / TD> < td>新鲜的船< / td> < td> i KILL< / td> < / TR> < TR> < TD>孤岛惊魂< / TD> < td> James Bond< / td> < td> House of Cards< / td> < td> Punguta cu 2 bani< / td> < / TR> < TR> < TD> Dota的< / TD> < td>饥饿游戏< / td> < TD>冒失鬼< / TD> < td>墨水< / td> < / TR> < TR> < td> Van-Helsing历险记< / td> < TD>启< / TD> < TD>我是僵尸< / TD> < TD>遮光< / TD> < / TR> < TR> < td>隐藏< / td> < td> Silver Lining Playbook< / td> < td>权力的游戏< / td> < TD>黄昏< / TD> < / TR> < TR> < td>英雄联盟< / td> < TD>宿命< / TD> < TD>德克斯特< / TD> < td>模仿游戏< / td> < / TR> < / tbody的> < / table>< / body>< / html>
<我需要通过按下标题来对我的列进行升序/降序排序，但是对jquery我是新的，我只是无法弄明白，我无法找到一个很好的教程，只用jquery对表进行排序，我不允许使用任何其他插件
解决方案
问题是你的细胞对几个em的空白区域。您可以 .trim 那些文本然后你就可以了：
var keyA = $ .trim（$（'td：eq（0）'，a）.text（））;
var keyB = $ .trim（$（'td：eq（0）'，b）.text（））;
So far i have got this bit of code:
$('.link-sort-table').click(function(e) {
var $sort = this;
var $table = $('#sort-table');
var $rows = $('tbody > tr', $table);
$rows.sort(function(a, b) {
var keyA = $('td:eq(0)', a).text();
var keyB = $('td:eq(0)', b).text();
if ($($sort).hasClass('asc')) {
return (keyA > keyB) ? 1 : -1;
} else {
return (keyA < keyB) ? 1 : -1;
}
});
$.each($rows, function(index, row) {
$table.append(row);
});
e.preventDefault();
});
thead {
color: green;
}
tbody {
color: blue;
}
tfoot {
color: red;
}
table,
th,
td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table id="sort-table" cellpadding="5" cellspacing="2" border="0">
<thead>
<tr>
<th align="left">Sort: <a href="#" class="link-sort-table asc">A-Z</a> <a href="#" class="link-sort-table desc">Z-A</a>
</th>
<th>Filme</th>
<th>Seriale</th>
<th>Carti</th>
</tr>
</thead>
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Sprinter Cell</td>
<td>The Martian</td>
<td>My Name is Earl</td>
<td>Harry Potter</td>
</tr>
<tr>
<td>Tomb Raider</td>
<td>Inception</td>
<td>The Big Bang Theory</td>
<td>The Casual Vacancy</td>
</tr>
<tr>
<td>Need for Speer</td>
<td>Ted</td>
<td>Supergirl</td>
<td>Fiddy shades</td>
</tr>
<tr>
<td>Counter Strike</td>
<td>Limitless</td>
<td>One-Punch Man</td>
<td>Morometii</td>
</tr>
<tr>
<td>Half Life</td>
<td>Pixels</td>
<td>Fresh off the boat</td>
<td>i KILL</td>
</tr>
<tr>
<td>FarCry</td>
<td>James Bond</td>
<td>House of Cards</td>
<td>Punguta cu 2 bani</td>
</tr>
<tr>
<td>Dota</td>
<td>Hunger Games</td>
<td>DareDevil</td>
<td>The Ink</td>
</tr>
<tr>
<td>The Adventures Of Van-Helsing</td>
<td>Inception</td>
<td>iZombie</td>
<td>Blackout</td>
</tr>
<tr>
<td>The Hidden</td>
<td>Silver Lining Playbook</td>
<td>Game of Thrones</td>
<td>Twilight</td>
</tr>
<tr>
<td>League of Legends</td>
<td>Predestination</td>
<td>Dexter</td>
<td>The Imitation game</td>
</tr>
</tbody>
</table>
</body>
</html>
I need to get it to sort my column ascending/descending by pressing the header but im new to jquery and i just cant figure it out, and i cant find a good tutorial for sorting tables with just jquery, im not allowed to use any other plugin
解决方案
The problem is the white-spaces that your cells have for a few of em. You can .trim those texts then you're ok :
var keyA = $.trim($('td:eq(0)',a).text());
var keyB = $.trim($('td:eq(0)',b).text());
这篇关于使用jquery排序表，没有其他插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
