javascript实现表格排序功能的实例

226 1 年前
本实例以学生成绩表为例,实现成绩按列大小排序功能,本着学习的目的,采用了ES6以及HTML5,请用支持浏览器查看,希望本文所述对大家的javascript程序设计有所帮助。

HTML DOM Table 对象

Table 对象代表一个 HTML 表格。在 HTML 文档中 table 标签每出现一次,一个 Table 对象就会被创建。

Table 对象集合

集合 描述 W3C
cells 返回包含表格中所有单元格的一个数组。 NO
rows 返回包含表格中所有行的一个数组。 YES
tBodies 返回包含表格中所有 tbody 的一个数组。 YES

Table 对象属性

集合 描述 W3C
caption 返回表格标题。 Yes
cellPadding 设置或返回单元格内容和单元格边框之间的空白量。 Yes
cellSpacing 设置或返回在表格中的单元格之间的空白量。 Yes
frame 设置或返回表格的外部边框。 Yes
rules 设置或返回表格的内部边框(行线)。 Yes
summary 设置或返回对表格的描述(概述)。 Yes
tFoot 返回表格的 TFoot 对象。如果不存在该元素,则为 null。 Yes
tHead 返回表格的 THead 对象。如果不存在该元素,则为 null。 Yes

element..addEventListener(event, function, useCapture)

方法用于向文档添加事件句柄 事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果。

let

ES6声明变量命令,声明的变量是块级作用域

element.classList

返回元素的类名,作为 DOMTokenList 对象。该属性用于在元素中添加,移除及切换 CSS 类。classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。

element.classList.contains(class)

返回布尔值,判断指定的类名是否存在。

element.dataset

操作自定义data-数据,data- 属性是 HTML 5 的新特性,允许用户在 DOM 中存储自定义信息。

document.createDocumentFragment

文档碎片

查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格排序功能</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .tablecon {
            width: 500px;
            margin: auto;
        }
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        .table th, .table td {
            padding: 3px 5px;
            text-align: center;
            border: 1px solid #CCCCCC;
        }
        .table .clickitem{
            cursor: pointer;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<p style="text-align: center">点击课程名称排序</p>
<div class="tablecon">
    <table id="stuTable" class="table">
        <thead>
        <tr>
            <th>姓名</th>
            <th class="clickitem" data-col="1">语文</th>
            <th class="clickitem" data-col="2">数学</th>
            <th class="clickitem" data-col="3">英语</th>
            <th class="clickitem" data-col="4">物理</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>张三</td>
            <td>115</td>
            <td>105</td>
            <td>95</td>
            <td>121</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>120</td>
            <td>121</td>
            <td>92</td>
            <td>140</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>98</td>
            <td>113</td>
            <td>102</td>
            <td>103</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>142</td>
            <td>98</td>
            <td>132</td>
            <td>99</td>
        </tr>
        <tr>
            <td>胡七</td>
            <td>99</td>
            <td>78</td>
            <td>88</td>
            <td>95</td>
        </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    let oTable = document.getElementById('stuTable');
    let oRows = oTable.tBodies[0].rows;
    let tHead = oTable.tHead;
    let cRows = [];
    for(let i=0;i<oRows.length;i++){
        cRows[i] = oRows[i]
    }
    tHead.addEventListener('click',changeTable);
    function changeTable(e) {
        let cTarget = e.target;
        if(cTarget.classList.contains('clickitem')){
            let iCol = cTarget.dataset.col;
            if (oTable.sortCol === iCol) {
                cRows.reverse();
            } else {
                cRows.sort(compareFn(iCol));
            }
            let oFragment = document.createDocumentFragment();
            for (let i=0; i < cRows.length; i++) {
                oFragment.appendChild(cRows[i]);
            }
            oTable.tBodies[0].appendChild(oFragment);
            oTable.sortCol = iCol;
        }
    }
    function compareFn(i) {
        return function (a,b) {
            let aValue = a.getElementsByTagName('td')[i].firstChild.nodeValue;
            let bValue = b.getElementsByTagName('td')[i].firstChild.nodeValue;
            if (aValue < bValue) {
                return -1;
            } else if (aValue > bValue) {
                return 1;
            } else {
                return 0;
            }
        }
    }
</script>
</body>
</html>
分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6