欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生js实现table的排序代码实例

程序员文章站 2022-05-02 12:18:11
原生js实现table的排序代码实例 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换c...

原生js实现table的排序代码实例

今天遇到了一个问题就是使用原生js对table标签进行排序

一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧children的值赋给table

但是问题出现了,就是每次操作children的值都没有效果。

最后发现自己走入了一个误区就是想要操作html标签只能通过修改innerhtml来进行操作,操作完innerhtml后children会自动改变

直接上代码吧

html代码

    <table>
        <thead>
            <tr><th>id</th><th>price</th><th>sales</th></tr>
        </thead>
        <tbody id="jslist">
            <tr><td>1</td><td>10.0</td><td>800</td></tr>
            <tr><td>2</td><td>30.0</td><td>600</td></tr>
            <tr><td>3</td><td>20.5</td><td>700</td></tr>
            <tr><td>4</td><td>40.5</td><td>500</td></tr>
            <tr><td>5</td><td>60.5</td><td>300</td></tr>
            <tr><td>6</td><td>50.0</td><td>400</td></tr>
            <tr><td>7</td><td>70.0</td><td>200</td></tr>
            <tr><td>8</td><td>80.5</td><td>100</td></tr>
        </tbody>
    </table>

代码

function sort(type, order) {
    var table = document.getelementbyid("jslist");
    var trarr = table.children;
    var inttype;
    if (type == "id") {
        inttype = 0;
    }
    else if (type == "price") {
        inttype = 1;
    }
    else if (type == "sales") {
        inttype = 2;
    }
var temp
    if (order == "asc") {
        for (var i = 0; i < trarr.length-1; i++) {
            for(j=0;j<trarr.length-i-1;j++){
                if((trarr[j].children[inttype].innerhtml-0)>(trarr[j+1].children[inttype].innerhtml-0)){
                    temp=trarr[j].innerhtml;
                    trarr[j].innerhtml=trarr[j+1].innerhtml;
                    trarr[j+1].innerhtml=temp;

                }

            }

        }
    } else {
        for (var i = 0; i < trarr.length-1; i++) {
            for(j=0;j<trarr.length-i-1;j++){
                if((trarr[j].children[inttype].innerhtml-0)<(trarr[j+1].children[inttype].innerhtml-0)){
                    temp=trarr[j].innerhtml;
                    trarr[j].innerhtml=trarr[j+1].innerhtml;
                    trarr[j+1].innerhtml=temp;

                }

            }

        }
    }

}

上一篇: 关机重启

下一篇: 磁盘和文件系统