根据rowspan中的最后一行对html表行进行排序
我想根据行数中的最后一行对给定的下表模型进行排序。
从图像中我想使用“累计小时”值对表进行排序。 这里我使用了rowspan = 4.
HTML代码
<table class="Table Table3" style="width:100%;">
<tbody>
<tr><th align="center" colspan="14">Month on Month Time Logging Summary </th></tr>
<tr><th width="15%">Name</th><th></th><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th><th>Jul</th><th>Aug</th><th>Sep</th><th>Oct</th><th>Nov</th><th>Dec</th></tr>
<tr class="trs"><td style="min-width:130px;" class="name_col" rowspan="4"><div><h4> User 1</h4></div></td><td style="text-align:left;"> Plan hours</td><td class="r1 ">144.0</td><td class="r1 ">120.0</td><td class="r1 ">152.0</td><td class="r1 ">132.0</td><td class="r1 ">136.0</td><td class="r1 ">136.0</td><td class="r1 ">40.0</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Acutal hours</td><td class="r1 ">137.03</td><td class="r1 ">108.24</td><td class="r1 ">146.44</td><td class="r1 ">116.54</td><td class="r1 ">125.39</td><td class="r1 ">126.13</td><td class="r1 ">40.07</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Excess / Lag</td><td class="r1 alert_red">-6.97</td><td class="r1 alert_red">-11.76</td><td class="r1 alert_red">-5.56</td><td class="r1 alert_red">-15.46</td><td class="r1 alert_red">-10.61</td><td class="r1 alert_red">-9.87</td><td class="r1 ">0.07</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Cumulative hours</td><td class="alert_red2">-6.97</td><td class="alert_red2">-18.73</td><td class="alert_red2">-24.29</td><td class="alert_red2">-39.75</td><td class="alert_red2">-50.36</td><td class="alert_red2">-60.23</td><td class="alert_red2">-60.16</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs"><td style="min-width:130px;" class="name_col" rowspan="4"><div><h4> User 2</h4></div></td><td style="text-align:left;"> Plan hours</td><td class="r1 ">144.0</td><td class="r1 ">168.0</td><td class="r1 ">144.0</td><td class="r1 ">152.0</td><td class="r1 ">148.0</td><td class="r1 ">152.0</td><td class="r1 ">48.0</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Acutal hours</td><td class="r1 ">143.28</td><td class="r1 ">168.58</td><td class="r1 ">145.11</td><td class="r1 ">149.29</td><td class="r1 ">144.27</td><td class="r1 ">162.24</td><td class="r1 ">50.22</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Excess / Lag</td><td class="r1 alert_red">-0.72</td><td class="r1 ">0.58</td><td class="r1 ">1.11</td><td class="r1 alert_red">-2.71</td><td class="r1 alert_red">-3.73</td><td class="r1 ">10.24</td><td class="r1 ">2.22</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Cumulative hours</td><td class="alert_red2">-0.72</td><td class="alert_red2">-0.14</td><td>0.97</td><td class="alert_red2">-1.74</td><td class="alert_red2">-5.47</td><td>4.77</td><td>6.99</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs"><td style="min-width:130px;" class="name_col" rowspan="4"><div><h4> User 3</h4></div></td><td style="text-align:left;"> Plan hours</td><td class="r1 ">136.0</td><td class="r1 ">164.0</td><td class="r1 ">160.0</td><td class="r1 ">136.0</td><td class="r1 ">168.0</td><td class="r1 ">136.0</td><td class="r1 ">40.0</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Acutal hours</td><td class="r1 ">155.52</td><td class="r1 ">182.32</td><td class="r1 ">179.54</td><td class="r1 ">161.13</td><td class="r1 ">193.57</td><td class="r1 ">160.52</td><td class="r1 ">46.5</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Excess / Lag</td><td class="r1 ">19.52</td><td class="r1 ">18.32</td><td class="r1 ">19.54</td><td class="r1 ">25.13</td><td class="r1 ">25.57</td><td class="r1 ">24.52</td><td class="r1 ">6.5</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Cumulative hours</td><td>19.52</td><td>37.84</td><td>57.38</td><td>82.51</td><td>108.08</td><td>132.6</td><td>139.1</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs"><td style="min-width:130px;" class="name_col" rowspan="4"><div><h4> User 4</h4></div></td><td style="text-align:left;"> Plan hours</td><td class="r1 ">112.0</td><td class="r1 ">168.0</td><td class="r1 ">176.0</td><td class="r1 ">160.0</td><td class="r1 ">148.0</td><td class="r1 ">152.0</td><td class="r1 ">32.0</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Acutal hours</td><td class="r1 ">130.1</td><td class="r1 ">187.43</td><td class="r1 ">194.3</td><td class="r1 ">174.38</td><td class="r1 ">156.44</td><td class="r1 ">170.37</td><td class="r1 ">38.54</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Excess / Lag</td><td class="r1 ">18.1</td><td class="r1 ">19.43</td><td class="r1 ">18.3</td><td class="r1 ">14.38</td><td class="r1 ">8.44</td><td class="r1 ">18.37</td><td class="r1 ">6.54</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Cumulative hours</td><td>18.1</td><td>37.53</td><td>55.83</td><td>70.21</td><td>78.65</td><td>97.02</td><td>103.56</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs"><td style="min-width:130px;" class="name_col" rowspan="4"><div><h4> User 5</h4></div></td><td style="text-align:left;"> Plan hours</td><td class="r1 ">136.0</td><td class="r1 ">164.0</td><td class="r1 ">176.0</td><td class="r1 ">156.0</td><td class="r1 ">148.0</td><td class="r1 ">152.0</td><td class="r1 ">48.0</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Acutal hours</td><td class="r1 ">134.49</td><td class="r1 ">168.07</td><td class="r1 ">189.29</td><td class="r1 ">166.04</td><td class="r1 ">151.5</td><td class="r1 ">165.18</td><td class="r1 ">58.35</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Excess / Lag</td><td class="r1 alert_red">-1.51</td><td class="r1 ">4.07</td><td class="r1 ">13.29</td><td class="r1 ">10.04</td><td class="r1 ">3.5</td><td class="r1 ">13.18</td><td class="r1 ">10.35</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Cumulative hours</td><td class="alert_red2">-1.51</td><td>2.56</td><td>15.85</td><td>25.89</td><td>29.39</td><td>42.57</td><td>52.92</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs"><td style="min-width:130px;" class="name_col" rowspan="4"><div><h4> User 6</h4></div></td><td style="text-align:left;"> Plan hours</td><td class="r1 ">144.0</td><td class="r1 ">160.0</td><td class="r1 ">176.0</td><td class="r1 ">160.0</td><td class="r1 ">160.0</td><td class="r1 ">120.0</td><td class="r1 ">48.0</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Acutal hours</td><td class="r1 ">163.42</td><td class="r1 ">205.23</td><td class="r1 ">177.36</td><td class="r1 ">182.23</td><td class="r1 ">212.1</td><td class="r1 ">45.17</td><td class="r1 ">38.11</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Excess / Lag</td><td class="r1 ">19.42</td><td class="r1 ">45.23</td><td class="r1 ">1.36</td><td class="r1 ">22.23</td><td class="r1 ">52.1</td><td class="r1 alert_red">-74.83</td><td class="r1 alert_red">-9.89</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr class="trs2"><td style="text-align:left;"> Cumulative hours</td><td>19.42</td><td>64.65</td><td>66.01</td><td>88.24</td><td>140.34</td><td>65.51</td><td>55.62</td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</tbody>
</table>
2 个答案:
答案 0 :(得分：1)
我需要的是datatable，所以请点击此处
https://datatables.net/
很多插件都在做同样的事情，所以如果你在提出问题之后在这些插件中出现错误，请先检查所有插件。
rowspan不用于排序请检查表格的所有属性。
答案 1 :(得分：0)
像这样？ https://jsfiddle.net/mpgdggtv/1/
//get the Table
var $table = $('table');
//get and cache the groups and the tds in the last Row
//don't have to compute that on each particular click
var $groups = $('.trs', $table).map(function(){
var $this = $(this);
var $rows = $this.add($this.nextUntil('.trs'));
return {
$rows: $rows,
$cumulativeHours: $rows.last().children('td')
};
});
//clickhandler on the header
$table.on('click', 'th', function(){
//get Clicked column
var col = $(this).index();
//fetch for each group of rows the value in the respective column
$groups.map(function(){
//create an intermediate value that holds a group of rows and the corresponding value
//because such caching is way cheaper than computing the value in the sort-function
return {
$rows: this.$rows,
value: parseFloat( this.$cumulativeHours.eq( col ).text() )
}
}).sort(function(a, b){ //sort by value
return a.value - b.value
}).each(function(){ //and append the grouped rows in the respective order
this.$rows.appendTo( $table );
});
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？