tablesort.js 前两行排序无效的问题。

一个不知道什么版本的tablesort.js,引用之后点击排序前两行排序无效,不动,后面的排序又是正常的

经过两天的查找,发现是因为没有tfoot标签,然后最奇怪的是里面必须要有两个tr标签,我也不知道为什么,少一个会导致有一行不动。

注释掉tfoot标签之后,怎么点前面两行都不动

 

 

 加上之后,可以正常排序,不知道什么原因,有懂的可以评论说一下

 

 

 

代码如下

<table class="edit myTable" id="myTable">
        <thead>
            <tr class="th">
                <th class="head" style="cursor: pointer;">医院</th>
                <th class="SortDescCss" style="cursor: pointer;">网络增幅</th>
                <th class="head" style="cursor: pointer;">网络今约</th>
                <th class="head" style="cursor: pointer;">网络今预</th>
                <th class="head" style="cursor: pointer;">网络今到</th>
                <th class="NormalCss" style="cursor: pointer;">网络月到</th>
                <th class="head" style="cursor: pointer;">网络同比</th>
                <th class="head" style="cursor: pointer;">网络上月到</th>
                <th class="head" style="cursor: pointer;">信息流今到</th>
                <th class="head" style="cursor: pointer;">信息流本月</th>
                <th class="head" style="cursor: pointer;">信息流上月</th>
                <th class="head" style="cursor: pointer;">电商今到</th>
                <th class="head" style="cursor: pointer;">电商本月</th>
                <th class="head" style="cursor: pointer;">电商上月</th>
                <th class="head" style="cursor: pointer;">新媒体今到</th>
                <th class="head" style="cursor: pointer;">新媒体本月</th>
                <th class="head" style="cursor: pointer;">新媒体上月</th>
            </tr>
        </thead>
        <tbody>
        <tr>
                <td style="color:#FF8040;font-weight:bold;">1</td>
                <td style="color: rgb(48, 181, 48);">43</td>
                <td>6</td>
                <td>11</td>
                <td>0</td>
                <td>277</td>
                <td>234</td>
                <td>293</td>
                <td>0</td>
                <td>34</td>
                <td>29</td>
                <td>0</td>
                <td>25</td>
                <td>16</td>
                <td>0</td>
                <td>1</td>
                <td>0</td>
            </tr><tr>
                <td style="color:#FF8040;font-weight:bold;">2</td>
                <td style="color: rgb(48, 181, 48);">38</td>
                <td>8</td>
                <td>11</td>
                <td>3</td>
                <td>217</td>
                <td>179</td>
                <td>216</td>
                <td>0</td>
                <td>18</td>
                <td>18</td>
                <td>0</td>
                <td>14</td>
                <td>15</td>
                <td>0</td>
                <td>1</td>
                <td>0</td>
            </tr><tr>
                <td style="color:#FF8040;font-weight:bold;">3</td>
                <td style="color: rgb(48, 181, 48);">19</td>
                <td>3</td>
                <td>9</td>
                <td>1</td>
                <td>198</td>
                <td>179</td>
                <td>224</td>
                <td>0</td>
                <td>31</td>
                <td>30</td>
                <td>0</td>
                <td>34</td>
                <td>23</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr><tr>
                <td style="color:#FF8040;font-weight:bold;">4</td>
                <td style="color: rgb(233, 47, 47);">-2</td>
                <td>5</td>
                <td>7</td>
                <td>2</td>
                <td>120</td>
                <td>122</td>
                <td>151</td>
                <td>0</td>
                <td>4</td>
                <td>4</td>
                <td>0</td>
                <td>12</td>
                <td>18</td>
                <td>0</td>
                <td>2</td>
                <td>2</td>
            </tr><tr>
                <td style="color:#FF8040;font-weight:bold;">5</td>
                <td style="color: rgb(233, 47, 47);">-15</td>
                <td>7</td>
                <td>19</td>
                <td>5</td>
                <td>475</td>
                <td>490</td>
                <td>590</td>
                <td>0</td>
                <td>32</td>
                <td>28</td>
                <td>0</td>
                <td>23</td>
                <td>25</td>
                <td>0</td>
                <td>3</td>
                <td>4</td>
            </tr><tr>
                <td style="color:#FF8040;font-weight:bold;">6</td>
                <td style="color: rgb(233, 47, 47);">-27</td>
                <td>3</td>
                <td>13</td>
                <td>5</td>
                <td>224</td>
                <td>251</td>
                <td>295</td>
                <td>0</td>
                <td>46</td>
                <td>50</td>
                <td>0</td>
                <td>46</td>
                <td>35</td>
                <td>0</td>
                <td>2</td>
                <td>0</td>
            </tr><tr>
                <td style="color:#FF8040;font-weight:bold;">7</td>
                <td style="color: rgb(233, 47, 47);">-48</td>
                <td>6</td>
                <td>13</td>
                <td>4</td>
                <td>266</td>
                <td>314</td>
                <td>360</td>
                <td>0</td>
                <td>33</td>
                <td>37</td>
                <td>1</td>
                <td>48</td>
                <td>38</td>
                <td>0</td>
                <td>6</td>
                <td>0</td>
            </tr></tbody>
        <!-- 不理解为什么要加tfoot这个玩意 不加前两行排序不会动,tr少一个都不行。我不理解  tr少一个是第一行不动,少两个是前两个都不动-->
        <tfoot>
            <tr></tr>
            <tr></tr>
        </tfoot>
    </table>


<script>
window.onload = function(){
    new TableSorter("myTable");

    $('tbody tr').each(function(){
        var text = $(this).children().eq(1).html();
        if(text.match(/-/g)){
            $(this).children().eq(1).css('color','#e92f2f');
        }else{
            $(this).children().eq(1).css('color','#30b530');
        }
    });
}

$("#myTable tbody tr").click(function(){
    $(this).css('background','#d8d8d8').siblings().css('background','');
})

</script>

 

 这是对应的jq包跟tablesort.js

链接:https://pan.baidu.com/s/1q7i_Ji42ZDMKPn7Yl6IGCQ
提取码:2u37

 

posted @ 2022-06-27 11:57  冷晨  阅读(165)  评论(0编辑  收藏  举报