JS learning summary of classic small cases table sorting-JS Tutorial-php.cn

JS learning summary of classic small cases table sorting

PHP中文网

Release： 2017-07-02 04:19:22

Original

1505 people have browsed it

The specific code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin:0;padding:0;font-family:"微软雅黑";font-size:14px;-webkit-user-008000--shadow: 3px 3px 10px 0008000-</style>
</head>
<body>
    <div class=box>
        <table id=&#39;tab&#39; cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th class=&#39;cursor&#39;>年龄</th>
                    <th class=&#39;cursor&#39;>武力</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>令狐冲</td>
                    <td>25</td>
                    <td>99</td>
                    <td>男</td>
                </tr>
                <tr class=&#39;bg&#39;>
                    <td>令狐冲</td>
                    <td>25</td>
                    <td>99</td>
                    <td>男</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script> oTab = document.getElementById('tab' tHead = oTab.tHead; oThs = tHead.rows[0].cells; tBody = oTab.tBodies[0 oRows = data =  xhr = xhr.open('get','data.txt',xhr.onreadystatechange = (xhr.readyState===4 && /^2\d{2}$/ val == utils.jsonParse(val);xhr.send( frg =( i = 0;i<data.length;i++ cur = oTr = document.createElement("tr");( key  oTd = document.createElement("td"(key==="sex"= cur[key]===0?"男":"女"== ( i = 0;i<oRows.length;i++= i%2===1?"bg": sort(n){ ary = _this = _.flag*=-1 curInn = nexInn = curInnNum = nexInnNum =(isNaN(curInnNum) || isNaN(nexInnNum)){ (curInn.localeCompare(nexInn))* (curInnNum-nexInnNum)* frg =( i = 0;i<ary.length;i++= ( i = 0;i<oThs.length;i++ curTh == i;curTh.flag = -1;(curTh.className===&#39;cursor&#39;= ,</script>
</body>
</html>

Copy after login

Data data.txt code　

[
    {"name":"令狐冲","age":24,"score":98,"sex":0},
    {"name":"任盈盈","age":22,"score":60,"sex":1},
    {"name":"岳灵珊","age":21,"score":88,"sex":1},
    {"name":"岳不群","age":26,"score":96,"sex":0},
    {"name":"林平之","age":23,"score":90,"sex":0}
]

Copy after login

The above is the detailed content of JS learning summary of classic small cases table sorting. For more information, please follow other related articles on the PHP Chinese website!