原生JavaScript实现对html中table数据的排序

最新推荐文章于 2022-03-31 15:59:42 发布

EEEEEEcho

最新推荐文章于 2022-03-31 15:59:42 发布

阅读量306

点赞数

分类专栏： JavaWeb 文章标签： javascript js

本文链接：https://blog.csdn.net/EEEEEEcho/article/details/115143766

版权

JavaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="table-middle">
        <a href="javascript:void(0)" id="sort-middle-table-by-identity" onclick="sortResultByIdentity(reverseByIdentity === true)">根据Identity排序</a>
        <a href="javascript:void(0)" id="sort-middle-table-by-coverage" onclick="sortResultByIdentity(reverseByCoverage === true)">根据SbjCoverage排序</a>
        <table id="middle-table">
            <thead>
            <tr>
                <th>Accession</th>
                <th>Strain name</th>
                <th>Genename</th>
                <th>Resistance</th>
                <th>Length</th>
                <th>E-value</th>
                <th>Identity</th>
                <th>SbjCoverage</th>
                <th>Score</th>
            </tr>
            </thead>
            <tbody>
                <tr><td>session</td><td>key</td><td>session</td><td>key</td><td>session</td><td>key</td><td>80</td><td>17.2</td><td>session</td></tr>
                <tr><td>session</td><td>key</td><td>session</td><td>key</td><td>session</td><td>key</td><td>90</td><td>16.2</td><td>session</td></tr>
            </tbody>
        </table>
    </div>
</body>
<script type="text/javascript">
    var reverseByIdentity = true
    var reverseByCoverage = true
    function sortResultByIdentity() {

        var table = document.getElementById("middle-table")
        //console.log(table.rows)
        var allRows = table.rows
        var values = []
        var result = []
        for(var x = 1;x < allRows.length;x ++){
            values[x - 1] = allRows[x];
            var arr = []
            for(var y = 0;y < values[x - 1].cells.length;y ++){
                if(y === 6 || y === 7){
                    arr.push(parseFloat(values[x - 1].cells[y].innerHTML))
                }
                else {
                    arr.push(values[x - 1].cells[y].innerHTML + "")
                }

            }
            result.push(arr)
        }
        if(reverseByIdentity){
            result.sort(((a, b) => {
                return a[6] - b[6]
            }))
            reverseByIdentity = false
        }
        else {
            result.sort(((a, b) => {
                return -(a[6] - b[6])
            }))
            reverseByIdentity = true
        }
        for(var i = 1;i < allRows.length;i ++){
            for (var j = 0;j < values[i - 1].cells.length;j ++){
                table.rows[i].cells[j].innerHTML = result[i - 1][j]
            }
        }
    }
    function sortResultByCoverage() {

        var table = document.getElementById("middle-table")
        //console.log(table.rows)
        var allRows = table.rows
        var values = []
        var result = []
        for(var x = 1;x < allRows.length;x ++){
            values[x - 1] = allRows[x];
            var arr = []
            for(var y = 0;y < values[x - 1].cells.length;y ++){
                if(y === 6 || y === 7){
                    arr.push(parseFloat(values[x - 1].cells[y].innerHTML))
                }
                else {
                    arr.push(values[x - 1].cells[y].innerHTML + "")
                }

            }
            result.push(arr)
        }
        if(reverseByCoverage){
            result.sort(((a, b) => {
                return a[7] - b[7]
            }))
            reverseByCoverage = false
        }
        else {
            result.sort(((a, b) => {
                return -(a[7] - b[7])
            }))
            reverseByCoverage = true
        }
        for(var i = 1;i < allRows.length;i ++){
            for (var j = 0;j < values[i - 1].cells.length;j ++){
                table.rows[i].cells[j].innerHTML = result[i - 1][j]
            }
        }
    }
</script>

</html>

EEEEEEcho

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript实现对html中table数据的排序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="table-middle"> <a href="javascript:void(0)" id="sort-middle-table-by
复制链接

扫一扫