javascript - 在不反转顶部的情况下反转 HTML 表格的行

Question

我有一个基本上是这样的表:

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>

谁能告诉我如何在不翻转第一行的情况下翻转这张表？

Answer 1

像这样构建你的表:

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