Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


Tables ehancement

How to dynamically reorder table content ? by Targol
Posted: 4 Nov 02

Let's say you're working with ASP or JSP and that you displayed the return values of a "SELECT ... ORDER BY..." query into a TABLE. Let's say again that your query brings back too many rows to be seen on one screen. Here is a sample code that permits to reverse the order of the rows in a table without any call to server (no traffic on network, only client script). May be this'll help some...

<script language="jscript">
  function reorder(listName, order) {
    var oHid_Order = document.getElementById("hid_" + listName + "_order");
    if (oHid_Order.value == order) {
       // Nothing to do : the order is allready good
    } else {
      oHid_Order.value = order;
      var oTable = document.getElementById(listName);
      var nbRows = oTable.children.length;
      var firstNode = oTable.children(0); // the first node will be reference.
      for (var i=1; i<nbRows; i++) {
         // What we are doing : get last row, delete it
         // and recreate it before reference node
         var curNode = oTable.children(nbRows-1);
         oTable.insertBefore(curNode, firstNode);
  <input id="hid_list1_order" type="text" value="asc" />
  <input type="button" value="sort asc." onclick="reorder('list1', 'asc');" />
  <input type="button" value="sort desc." onclick="reorder('list1', 'desc');" />
    <tbody ID="list1">
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close