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.

Visit PhpDaddy.com

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

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.