rowspan의 마지막 행을 기준으로 html 테이블 행 정렬

Question

rowspan의 마지막 행을 기반으로 주어진 아래 테이블 모델을 정렬하려고합니다. 내가 "누적 시간"값을 사용하여 테이블을 정렬 할 이미지에서

. 여기에 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;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     <tr class="trs2"><td style="text-align:left;">&nbsp;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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
    </tbody> 
</table> 

Answer 1

? 당신이 datatable처럼 필요 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); 
    }); 
}); 

Answer 2

나는 일이 너무 플러그인의 https://datatables.net/

많은 당신이 그 인상 질문 후 이러한 플러그인에 약간의 오류가 발생하는 경우 그래서 먼저 플러그인을 확인하시기 바랍니다 같은 일을하고 여기에 확인하시기 바랍니다.

rowspan 정렬에 사용되지 않음 표의 모든 속성을 확인하십시오.

http://www.w3schools.com/html/html_tables.asp