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