常见编程题 - 按照价格升降排序

HTML代码

<table>
    <thead>
        <tr><th>id</th><th>price</th><th>sales</th></tr>
    </thead>
    <tbody id="jsList">
        <tr><td>1</td><td>22.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>

CSS代码

    <style type="text/css">
    body,html{
        padding: 0;
        margin: 0;
        font-size: 14px;
        color: #000000;
    }
    table{
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;
    }
    thead{
        background: #3d444c;
        color: #ffffff;
    }
    td,th{
        border: 1px solid #e1e1e1;
        padding: 0;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    </style>

JS代码

<script type="text/javascript">
function sort(type, order) {
    var list = document.getElementById('jsList');
    var trs = list.getElementsByTagName('tr');
    var col;
    switch(type) {
        case 'id':
            col = 0;
            break;
        case 'price':
            col = 1;
            break;
        case 'sales':
            col = 2;
            break;
    }
    trs = Array.prototype.slice.call(trs,0);//转换为数组形式
    //console.log(trs);
    trs.sort(function(val1,val2) {
        var v1 = parseFloat(val1.getElementsByTagName('td')[col].innerText);
        var v2 = parseFloat(val2.getElementsByTagName('td')[col].innerText);
        if(order === 'asc') {       
            return v1 - v2; //升序
        }else {
            return v2 - v1; //降序
        }
    })
    //添加到table
    trs.forEach(function(item) {
        list.appendChild(item);
    })   
}
</script>