的JavaScript - 倒車的HTML表格的行，而不反轉頂部

我有一個表，基本上是這樣的：的JavaScript - 倒車的HTML表格的行，而不反轉頂部

A1 A2 A3

B1，B2，B3

C1，C2，C3

我想扭轉它，所以它看起來像這樣

c1 c2 c3

B1，B2，B3

A1 A2 A3

只要「點擊我」按鈕被按下

<table class='standardtable'> 
<tr> 
    <th>Event</th> 
    <th>Group</th> 
    <th>Course</th> 
    <th>Due Date</th> 
    <th>Due In/<span class='red'>Late By</span></th> 
    <button onclick="myFunction()">Click me</button> 
</tr> 
<td id='others'> 
<?php 
echo $html->tableCells($evalUpcoming); 
?> 
<?php if (empty($evalUpcoming)):?> 
<tr><td colspan="5" align="center"><b> No peer evaluations due at this time </b></td></tr> 
<?php endif; ?> 
</td>

顯然，第一行是標題，其餘是內容。我試着分開第一排，另一個使用TD，但它似乎並沒有工作：

<table class='standardtable'> 
<tr> 
    <th>Event</th> 
    <th>Group</th> 
    <th>Course</th> 
    <th>Due Date</th> 
    <th>Due In/<span class='red'>Late By</span></th> 
    <button onclick="myFunction()">Click me</button> 
</tr> 
<td id='others'> 
<?php 
echo $html->tableCells($evalUpcoming); 
?> 
<?php if (empty($evalUpcoming)):?> 
<tr><td colspan="5" align="center"><b> No peer evaluations due at this time </b></td></tr> 
<?php endif; ?> 
</td> 
<script> 
    function myFunction(){ 
     var table = document.getElementById('others'); 

     for (var i = 0; i < table.length; i++) { 
      var rows = table[i].rows; 
      for (var j = 0; j < rows.length; j++) { 
        rows[j].parentNode.insertBefore(rows[rows.length-1], rows[j]); 
      } 
     } 
     } 

    </script>

誰能告訴我如何，我可以扭轉這種表無需反轉頂行？

來源

2015-12-02 Steven Hsu

一個簡單的方法你想通過PHP或通過JavaScript來扭轉這種局面，的onclick什麼 –

我試圖扭轉這種局面通過JavaScript，當我點擊「點擊我」按鈕 –

使用''和''從您的內容中拆分您的標題 – Theunis

建立你的表像：

<table class='standardtable'> 
<thead> <!-- use thead to separate headercontent --> 
    <tr> 
    <th>Event</th> 
    <th>Group</th> 
    <th>Course</th> 
    <th>Due Date</th> 
    <th>Due In/<span class='red'>Late By</span></th> 
    <button onclick="myFunction()">Click me</button> 
    </tr> 
</thead> 
<tbody> <!-- use tbody to separate tablecontent--> 
    <?php 
    echo $html->tableCells($evalUpcoming); 
    ?> 
    <?php if (empty($evalUpcoming)):?> 
    <tr><td colspan="5" align="center"><b> No peer evaluations due at this time </b></td></tr> 
    <?php endif; ?> 
</tbody>

來源

2015-12-02 13:05:34 Synoon

我已經這樣做了，但它似乎沒有什麼區別，無論我添加一個id給tbody，或者只是嘗試並顛倒整個表格 –

NEVERMIND忽略這一點非常感謝幫助 –

我覺得我有點晚瞭解決方案，但，是的，如果你使用THEAD和TBODY分開你的元素，那麼你就可以獲得排序的分離，以便只有tbody的子元素將被排序。

<table class='standardtable'> 
    <thead> 
    <tr> 
     <th>Event</th> 
     <th><button onclick="myFunction()">Click me</button></th> 
    </tr> 
    </thead> 
    <tbody id="table-body"> 
    <tr> 
     <td>a</td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>b</td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>c</td> 
     <td></td> 
    </tr>  
    </tbody> 
</table>

下面是一個例子實施它帶倒車表體元素jsfiddle

來源

2015-12-02 13:13:06 Dan

的JavaScript - 倒車的HTML表格的行，而不反轉頂部

回答

相關問題