HTML-Tabellenzeile basierend auf der letzten Zeile in einer Zeilenspanne sortieren

-1

Ich möchte das unten angegebene Tabellenmodell basierend auf der letzten Zeile in einer Zeilenspanne sortieren.HTML-Tabellenzeile basierend auf der letzten Zeile in einer Zeilenspanne sortieren

Aus dem Bild Ich möchte die Tabelle sortieren „Cumulative Stunden“-Wert. Hier habe ich rowspan = 4 verwendet.

HTML-Code

<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>

Quelle

2016-07-11 ManiMuthuPandi

Wissen Sie, was 'rowspan' tut? – evolutionxbox

@evolutionxbox Ich habe meine Beispielausgabe mit rowspan in der Frage – ManiMuthuPandi

Ok gezeigt. Ich glaube, ich habe falsch verstanden, was du mit rowspan machen wolltest. Ich verstehe immer noch nicht, wie Sie eine Tabelle "basierend" in einer Zeile sortieren. Normalerweise wird eine Tabelle nach einer Spalte sortiert, indem die Werte in jeder Zeile dieser Spalte verglichen werden. – evolutionxbox

so? 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); 
    }); 
});

Quelle

2016-07-11 10:39:29 Thomas

ich, was Sie wie datatable so müssen überprüfen Sie bitte hier https://datatables.net/

Viele Plugin tun gleiche Sache so überprüfen Sie bitte zuerst alle Plugin, wenn Sie einige Fehler in dieser Plugin nach dieser Raise Frage kommen.

rowspan nicht zum sortieren verwenden bitte alle Eigenschaften der Tabelle überprüfen.

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

Quelle

2016-07-11 10:45:42

HTML-Tabellenzeile basierend auf der letzten Zeile in einer Zeilenspanne sortieren

Antwort

Verwandte Themen