Next Prev

Table Organize

This script basically allows you to do three things:
(1) Re-organize the rows (2) Re-organize the columns (3) Browse the table using the up/down arrows.

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<html><head>
<base href="http://www.ajaxdaddy.com/web20/table-organize/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style><title>NoFunc: Playlists</title>

 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script src="javascript/tableorganize.js" type="text/javascript"></script>
 <script src="javascript/tableorganize_example.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" media="all" href="css/tableorganize.css" />
 </head><body id="body">


<center>
<table id="table" onselectstart="return false" cellspacing="0">
 <thead>
  <tr class="asc" id="head">
   <th style="width: 25px;">#</th>
   <th style="width: 350px;">Title<span></span></th>
   <th>Artist<span></span></th>
   <th>Genre<span></span></th>
   <th style="width: 150px;">Time<span></span></th>
   <th style="width: 150px;">Rating<span></span></th>
   <th style="width: 17px;">&nbsp;</th>
  </tr>
 </thead>
 <tbody id="tbody">
  <tr class="odd"><td>1</td><td>Alone in Kyoto</td><td>Air</td><td>Chillout</td><td>4:49</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="even"><td>2</td><td>Sexy Boy</td><td>Air</td><td>Chillout</td><td>4:58</td><td>****</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="odd" id=""><td>3</td><td>Surfin On A Rocket</td><td>Air</td><td>Chillout</td><td>3:47</td><td>*****</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="even"><td>4</td><td>Oracle</td><td>Amon Tobin</td><td>Chillout</td><td>4:31</td><td>********</td><td onclick="trRM(this.parentNode);">x</td></tr>
  
  <tr id="" class="odd"><td>5</td><td>Horizon</td><td>Assemblage 23</td><td>Chillout</td><td>7:33</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr id="" class="even"><td>6</td><td>Gaston Avenue</td><td>Astronautalis</td><td>Chillout</td><td>4:39</td><td>****</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr id="" class="odd"><td>7</td><td>Oceanwalk</td><td>Astronautalis</td><td>Chillout</td><td>4:52</td><td>&nbsp;</td><td onclick="trRM(this.parentNode);">x</td></tr><tr id="" class="even"><td>8</td><td>Sweet Life</td><td>Ashwan</td><td>Chillout</td><td>5:15</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="odd"><td>9</td><td>Gentle Rain [RJD2 Remix]</td><td>Astrud Gilberto</td><td>Chillout</td><td>6:01</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr id="" class="even"><td>10</td><td>Army of Me</td><td>Atoi</td><td>Chillout</td><td>4:31</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr id="this" class="odd"><td>11</td><td>Frontier Psychiatrist</td><td>Avalanches</td><td>Chillout</td><td>4:50</td><td>*****</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="even"><td>12</td><td>Tangent</td><td>Beth Orton</td><td>Chillout</td><td>7:28</td><td>&nbsp;</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="odd"><td>13</td><td>Don't Explain [Dzihan &amp; Kamien Remix]</td><td>Billie Holiday</td><td>Chillout</td><td>4:49</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
 </tbody>
</table></center>

<script type="text/javascript">



document.onkeydown=function(e){ kRun(e,Array(37,38,39,40),function(k) { var v=((k==40||k==39)?1:-1); iSW('this',Tr[Math.min(Trl,Math.max(0,$('this').rowIndex+v-1))]); }); };
document.onkeyup=function(){ stopK[0]=1; };

/* GLOBALS */

var T=$('table'), Tb=T.tBodies[0], Tr=Tb.rows, Trl=Tr.length-1, stop=0, stopTH=0, stopK='', cur=''; trMAP(0,'',1); thMouse($T('th','head'),Array(0,6));

</script>
</body></html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Ian

2009-12-16 11:11:15

Table's nice, but there is a bug in the script - the apostrophes aren't being escaped. You can see this in the demo above if you try to swap the artist and title columns, "Don't Explain" (row 13) isn't being carried over.

Other Alex

2009-12-03 16:20:08

Thanks for the great example that will be used in my custom photo contest. As a thanks I offer a fix for the IE issue. File: tableorganize_example.js Change: Tb.insertBefore(z,Tr[b]); To This: if(n!=(Trl-1)&&b!=Trl) { Tb.insertBefore(z,Tr[b]); } else { Tb.appendChild(z,Tr[b]); }

Alex

2009-06-05 08:44:04

Thank you for the script.

Damin

2009-05-04 01:46:55

Hi, I really liked the Table, but... Are there a method to scroll the items without move the header? When the list is too long, I can't see the header.

David

2008-05-08 03:30:01

yeah Diego is correct, when downloading the JS files, the code does not work. The only way to get it working is to have ajaxdaddy.com as the base dir. Whats wrong?

Pokua

2008-04-21 07:04:40

Okay, I got it to work and also got the Database to record the changes. Howevre, I have a problem with IE. Sometimes, wehen you dray the botoom row, it overlaps the immediate row on top, and the table shortened by one row. Refreshing the page corrects the row overlap. Do you have that issue, and how do I get around that. Thanks

Indranil Banerjie

2008-04-20 07:58:44

This is an extremely useful sxcript for people like myself who are involved in office work. We often have to generate tables for presentations etc. Its so useful if one could just shift the rows like in this example. I wish I knew some programming!

Pokua

2008-02-28 12:42:43

Whenever you refresh, the original table arrangement comes back... you lose all your modifications. How do you prevent that?

Rzl

2008-02-26 23:50:26

Hi, me too really like the table. But it gonna be cool if you could add page pagination.

Diego

2007-09-20 07:32:06

Hi, I really liked the Table, but I can't seem to make it work in my computer. Both of the js that you are referencing are available throw the script source? It seems to me that the tableorganize_example.js is missing or something. Besides what is the html code at the end of the script for? I can't save it because of some character encoding problem.

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Table Organize

This script basically allows you to do three things:
(1) Re-organize the rows (2) Re-organize the columns (3) Browse the table using the up/down arrows.

Comment on this example

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Table Organize

This script basically allows you to do three things: (1) Re-organize the rows (2) Re-organize the columns (3) Browse the table using the up/down arrows.

Comment on this example

This script basically allows you to do three things:
(1) Re-organize the rows (2) Re-organize the columns (3) Browse the table using the up/down arrows.