反转HTML表的行而不反转顶部

reversing rows of an HTML table without reversing the top

本文关键字：顶部 HTML 反转      更新时间：2023-09-26

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

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>

有人能告诉我如何在不倒上排的情况下把这张桌子倒过来吗？

这样构建表：

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

我想我的解决方案有点晚了，但是的，如果你用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

相关文章：