Javascript 根据行范围中的最后一行对html表行进行排序
我想根据rowspan中的最后一行对下表中给定的模型进行排序 从图像中，我想使用“累计小时”值对表进行排序。 这里我使用了rowspan=4 HTML代码Javascript 根据行范围中的最后一行对html表行进行排序,javascript,jquery,html,Javascript,Jquery,Html,我想根据rowspan中的最后一行对下表中给定的模型进行排序 从图像中，我想使用“累计小时”值对表进行排序。 这里我使用了rowspan=4 HTML代码 <table class="Table Table3" style="width:100%;"> <tbody> <tr><th align="center" colspan="14">Month on Month Time Logging Summary &l
<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>
逐月时间记录摘要
姓名JanfebmarapMayJunJulAugusSepoctNovDec
用户1计划小时数144.0120.0152.0132.0136.0136.040.0
实际小时137.03108.24146.44116.54125.39126.1340.07
过量/滞后-6.97-11.76-5.56-15.46-10.61-9.870.07
累积小时数-6.97-18.73-24.29-39.75-50.36-60.23-60.16
用户2计划小时数144.0168.0144.0152.0148.0152.048.0
实际小时143.28168.58145.11149.29144.27162.2450.22
过量/滞后-0.720.581.11-2.71-3.7310.242.22
累积小时数-0.72-0.140.97-1.74-5.474.776.99
用户3计划小时136.0164.0160.0136.0168.0136.040.0
实际小时数155.52182.32179.54161.13193.57160.5246.5
过量/滞后19.5218.3219.5425.1325.5724.526.5
累积小时数19.5237.8457.3882.51108.08132.6139.1
用户4计划小时数112.0168.0176.0160.0148.0152.032.0
实际小时数130.1187.43194.3174.38156.44170.3738.54
超额/滞后18.119.4318.314.388.4418.376.54
累积小时数18.137.5355.8370.2178.6597.02103.56
用户5计划小时136.0164.0176.0156.0148.0152.048.0
实际小时134.49168.07189.29166.04151.5165.1858.35
过量/滞后-1.514.0713.2910.043.513.1810.35
累计小时数-1.512.5615.8525.8929.3942.5752.92
用户6计划小时数144.0160.0176.0160.0160.0120.048.0
实际小时数163.42205.23177.36182.23212.145.1738.11
超额/滞后19.4245.231.3622.2352.1-74.83-9.89
累积小时数19.4264.6566.0188.24140.3465.5155.62
我想知道你需要什么样的
datatablerowspan你知道rowspan做什么吗？@evolutionxbox我在问题OK中展示了我的样本输出和rowspan。我想我误解了你想让rowspan做什么。我仍然不明白您希望如何“基于”一行对表进行排序。通常情况下，一个表是按一列排序的，通过比较该列每一行中的值来排序的。可能我没有正确解释我的问题。我的期望是根据“累计小时数”值对当月（7月）数据进行排序，因此在对7月数据进行排序时，所有其他月份的数据都应与该列对齐
//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 );
});
});