JavaScript/CSS 表格排序功能

本章节我们将学习如何使用 JS/CSS 实现表格排序功能。

先看下效果如下,点击按钮实现排序(按字母升序排序,居于 Name 字段):

排序代码

实例

function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById(myTable);
switching = true;
/* 设置一个循环语句 */
while (switching) {
// 设置循环结束标记
switching = false;
rows = table.rows;
/* 循环表格的行 */
for (i = 1; i (rows.length1); i++) {
// 设置元素是否调换位置
shouldSwitch = false;
/* 获取要比较的元素 */
x = rows[i].getElementsByTagName(TD)[0];
y = rows[i + 1].getElementsByTagName(TD)[0];
// 判断是否将下一个元素与当前元素进行切换
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// 设置调换元素标记,并结束当前循环
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* 如果元素调换位置设置为 true,则进行对调操作 */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}

尝试一下 »

通过点击表头来实现排序

单击表头字段对表格进行排序。

第一次单击时,排序方向为升序(A 到 Z)。

再次点击,排序方向为降序(Z到A)。

实例

function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById(myTable2);
switching = true;
// 设置升序排列
dir = asc;
/* 设置一个循环语句 */
while (switching) {
// 设置循环结束标记
switching = false;
rows = table.rows;
/* 循环列表,从第二行开始 */
for (i = 1; i (rows.length1); i++) {
// 设置元素是否调换位置
shouldSwitch = false;
/* 获取要比较的元素,
one from current row and one from the next:
*/
x = rows[i].getElementsByTagName(TD)[n];
y = rows[i + 1].getElementsByTagName(TD)[n];
/* 判断是否将下一个元素与当前元素进行切换 (asc 或 desc): */
if (dir == asc) {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// 设置调换元素标记,并结束当前循环
shouldSwitch = true;
break;
}
} else if (dir == desc) {
if (x.innerHTML.toLowerCase() y.innerHTML.toLowerCase()) {
// 设置调换元素标记,并结束当前循环
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/* 如果元素调换位置设置为 true,则进行对调操作 */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// 每次对调完成时,将 switchcount 增加 1
switchcount ++;
} else {
/* 如果完成所有元素的排序且 direction 设置为 “asc”,这时就将 direction 设置为 “desc” 并再次执行循环 */
if (switchcount == 0 && dir == asc) {
dir = desc;
switching = true;
}
}
}
}

尝试一下 »

数字排序

实例

if (Number(x.innerHTML) > Number(y.innerHTML)) {
shouldSwitch = true;
break;
}

尝试一下 »

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
  1. 免费下载或者VIP会员资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
  2. 提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。
  3. 找不到素材资源介绍文章里的示例图片?
    对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
  4. 付款后无法显示下载地址或者无法查看内容?
    如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理
  5. 购买该资源后,可以退款吗?
    源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

评论(0)

提示:请文明发言