CODEWITHSUNDEEP
javascripthtmlcss
Steven Hsu
Steven Hsu

Reputation: 183

javascript - reversing rows of an HTML table without reversing the top

I have a table that basically goes like this:

a1 a2 a3

b1 b2 b3

c1 c2 c3

i want to reverse it so it looks like this

c1 c2 c3

b1 b2 b3

a1 a2 a3

whenever the "click me" button is pressed

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

Obviously the first row are the headings, and the others are the content. I tried separating the first row and the other using td but it does not seem to work:

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

Can anyone please tell me how i can reverse this table without reversing the top row?

Upvotes: 0

Views: 807

Answers (2)

Dan
Dan

Reputation: 340

I think I'm a bit late for a solution but yeah, if you separate your elements by using thead and tbody then you will be able to get that separation for the sorting so that only the child elements of the tbody will get sorted.

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

Here is an example implementation of it with a simple way of reversing the table body elements jsfiddle

Upvotes: 1

Synoon
Synoon

Reputation: 2351

Build your table like that:

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

Upvotes: 1

Related Questions