Solved

Moving table rows up and down with javascript

Posted on 2004-08-19
8
17,423 Views
Last Modified: 2008-01-09
Hello all

Im looking to show the user an HTML table with about 8 rows.  I want them to be able to customize the order by moving rows up and/or down in the table, then be able to send the newly-ordered list (array, string, whatever) out via a form submit.  Can anyone point me in the right direction?

300 points and a gallon of ice cream to the lucky winner...
0
Comment
Question by:soBC
  • 4
  • 2
  • 2
8 Comments
 
LVL 13

Expert Comment

by:StormyWaters
ID: 11845895
I'll work on the form submit, but is this what you want?

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language = "Javascript">
var activeRow = 0;
function setActiveRow(el) {
  var rows = document.getElementById('movingTable').rows;
  for(var i = 0; i < rows.length; i++) {
    if(rows[i] == el) {
        rows[i].style.backgroundColor = "blue";
        activeRow = i;
      } else {
        rows[i].style.backgroundColor = "white";
      }
  }
}
function moveActiveRow(move) {
  var rows = document.getElementById('movingTable').rows;
  var oldRow = rows[activeRow].innerHTML;
  var newRow = rows[activeRow+move].innerHTML;
  rows[activeRow].innerHTML = newRow;
  rows[activeRow+move].innerHTML = oldRow;
  setActiveRow(rows[activeRow+move]);
}
</script>
</head>
<body>
<table width="100" border="2" cellspacing="0" cellpadding="0" id="movingTable">
  <tr onClick="setActiveRow(this)">
    <td>1</td>
    <td>&nbsp;</td>
  </tr>
  <tr onClick="setActiveRow(this)">
    <td>2</td>
    <td>&nbsp;</td>
  </tr>
  <tr onClick="setActiveRow(this)">
    <td>3</td>
    <td>&nbsp;</td>
  </tr>
  <tr onClick="setActiveRow(this)">
    <td>4</td>
    <td>&nbsp;</td>
  </tr>
  <tr onClick="setActiveRow(this)">
    <td>5</td>
    <td>&nbsp;</td>
  </tr>
  <tr onClick="setActiveRow(this)">
    <td>6</td>
    <td>&nbsp;</td>
  </tr>
  <tr onClick="setActiveRow(this)">
    <td>7</td>
    <td>&nbsp;</td>
  </tr>
  <tr onClick="setActiveRow(this)">
    <td>8</td>
    <td>&nbsp;</td>
  </tr>
</table>
<a href="javascript:moveActiveRow(-1)">Move up</a>|<a href="javascript:moveActiveRow(1)">Move down</a>

</body>
</html>

(You can get rid of the highlighting, it was mostly for debug.)
0
 

Author Comment

by:soBC
ID: 11845983
Nice....close, but unfortunately i need the up/dn arrows to be in each row.  Actually i may have found something, but its quite a bit of code.  If you can tweak your code to help me get behavior similar to this...

http://surfmind.com/lab/table_reorder.cfm

then that gallon of ice cream is all yours.

 
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 11846176
That's much, much different. It'll need some work.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 13

Expert Comment

by:StormyWaters
ID: 11846385
Okay! This should be it. You can, of course, replace 'Down' and 'Up' with images if you'd like. When you submit the form, the hidden field 'order' will contain a pipe-delimited list of the first columns in the table.

If you want to change it to be delimited by something else, change: return ret.join('|'); to return ret.join('<your character>') in the doSubmit() function.

Though personally I say I like the one with just one button and highlighting the row a lot more!

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language = "Javascript">
var activeRow = 0;
function setActiveRow(el) {
  var rows = document.getElementById('movingTable').rows;
  for(var i = 0; i < rows.length; i++) {
    if(rows[i] == el) activeRow = i;
  }
}

function moveActiveRow(move) {
  var rows = document.getElementById('movingTable').rows;
  var oldRow = rows[activeRow].innerHTML;
  var newRow = rows[activeRow+move].innerHTML;
  rows[activeRow].innerHTML = newRow;
  rows[activeRow+move].innerHTML = oldRow;
  setActiveRow(rows[activeRow+move]);
}

function moveRow(cell, move) {
  setActiveRow(cell.parentNode);
  moveActiveRow(move);
}

function doSubmit() {
  var rows = document.getElementById('movingTable').rows;
  var ret = new Array();
  for(var i = 0; i < rows.length;i++) {
    ret[ret.length] = rows[i].getElementsByTagName('td')[0].innerHTML;
  }
  return ret.join('|');
}
</script>
</head>
<body>
<table width="100" border="2" cellspacing="0" cellpadding="0" id="movingTable">
  <tr>
    <td>1</td>
    <td onClick="moveRow(this, 1)">Down</td>
    <td onClick="moveRow(this, -1)">Up</td>
  </tr>
  <tr>
    <td>2</td>
    <td onClick="moveRow(this, 1)">Down</td>
    <td onClick="moveRow(this, -1)">Up</td>
  </tr>
  <tr>
    <td>3</td>
    <td onClick="moveRow(this, 1)">Down</td>
    <td onClick="moveRow(this, -1)">Up</td>
  </tr>
  <tr>
    <td>4</td>
    <td onClick="moveRow(this, 1)">Down</td>
    <td onClick="moveRow(this, -1)">Up</td>
  </tr>
  <tr>
    <td>5</td>
    <td onClick="moveRow(this, 1)">Down</td>
    <td onClick="moveRow(this, -1)">Up</td>
  </tr>
  <tr>
    <td>6</td>
    <td onClick="moveRow(this, 1)">Down</td>
    <td onClick="moveRow(this, -1)">Up</td>
  </tr>
  <tr>
    <td>7</td>
    <td onClick="moveRow(this, 1)">Down</td>
    <td onClick="moveRow(this, -1)">Up</td>
  </tr>
  <tr>
    <td>8</td>
    <td onClick="moveRow(this, 1)">Down</td>
    <td onClick="moveRow(this, -1)">Up</td>
  </tr>
</table>

<form name="form1" method="post" action="" onSubmit="this.order.value=doSubmit()">
  <input type="hidden" name="order">
  <input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>
0
 
LVL 13

Accepted Solution

by:
StormyWaters earned 300 total points
ID: 11846390
I can probably cut down on the code a bit, actually. I'll let you know. But this is functional.
0
 
LVL 1

Expert Comment

by:John-Doe
ID: 11848757
Hmm,.... ever tried this?:
Find it cool..




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Swap Around</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--
  %%%%%% Credits %%%%%%
  Author @ http://www.progative.com
  pblc@progative.com

  no garanties given - :)

  Only tested in IE6

-->
<style>

img {
   cursor:move;
}

tr, tr td {
      background-color: #FFFFFF;
      border-left:#F2F2F2;
      border-top:#F2F2F2;
}

td.cfrom {
  color:red;
}

td.cto {
  color:blue;
}

tr.rfrom td{
      color: #F22F02;
}

tr.rto td{
      color: #F222F2;
}

</style>


<script language="JavaScript" type="text/javascript">

var setIco = '#define icon_width 8\n#define icon_height 8\nstatic char icon_bits[] = { 0x08, 0x21, 0xf8, 0x3f, 0x08, 0x24, 0x28, 0x2a, 0x58, 0x31, 0x88, 0x20, 0xf8, 0x3f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00};';
var curCell  = null;
var curRow   = null;
var curSwapC = null;
var curSwapR = null;


function selectRow()
{
   if(curRow){curRow.className = '';}
   if(curCell){curCell.className = '';}
   curCell = null;
   curRow = event.srcElement.parentNode.parentNode;
   document.getElementById("csr").innerHTML = '<b>&loz;[LastSelected]:</b>'+curRow.innerHTML;
   curRow.className = 'rfrom';
}

function selectCell()
{
   if(curCell){curCell.className = '';}
   if(curRow){curRow.className = '';}
   curRow = null;
   curCell = event.srcElement.parentNode;
   document.getElementById("csr").innerHTML = '<b>&loz;[LastSelected]:</b>'+curCell.innerHTML;
   curCell.className = 'cfrom';
}


function doTheSwap()
{

  try{
        if(curCell!=null)
        {
           curCell.swapNode(curSwapC);
           curSwapC.className = '';
        }else{
           curRow.swapNode(curSwapR);
           curSwapR.className = '';
        }
     }catch(er){
       // just in case...
     }
}

function setCurSwap()
{
 try{
      var tmpSwap = event.srcElement;
      if(tmpSwap.innerText.substr(0)=="") // PREVENT FROM DROP ON ICO
      {
         window.event.returnValue = false;
         return;
      }
       if(curCell!=null)
       {
         if(tmpSwap.innerText.substr(0,8)=="MOVE ROW") // PREVENT FROM CELL DROP ON ROW
         {
            window.event.returnValue = false;
            return;
         }
         if(curSwapC!=null && curSwapC!=curCell)
           {
             curSwapC.className = '';
           }
         curSwapC = tmpSwap;
         if(curSwapC){if(curSwapC!=curCell){curSwapC.className = 'cto';}}
         window.event.returnValue = false;
       }else{
         if(curSwapR!=null && curSwapR!=curRow)
           {
             curSwapR.className = '';
           }
         curSwapR = event.srcElement.parentNode;
         if(curSwapR){if(curSwapR!=curRow){curSwapR.className = 'rto';}}
         window.event.returnValue = false;
       }
    }catch(er){
      //just in case...
    }
}



function doSubmit() {
  var rows = document.getElementById('jacarta').rows;

  var col2 = new Array();
  var col3 = new Array();
  var col4 = new Array();

  for(var i = 0; i < rows.length;i++) {
    col2[i] = rows[i].getElementsByTagName('td')[1].innerHTML;
    col3[i] = rows[i].getElementsByTagName('td')[2].innerHTML;
    col4[i] = rows[i].getElementsByTagName('td')[3].innerHTML;

  }

  return col2+'\n\n'+col3+'\n\n'+col4;

}



</script>


</head>

<body ondrop="doTheSwap();">

<table border=1 id='jacarta'>

            <tr ondragenter='setCurSwap();' ondragover="setCurSwap();">
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectRow();">MOVE ROW[1]</td>
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectCell();">1AAAA</td>
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectCell();">2BBBB</td>
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectCell();">3CCCC</td>
            </tr>

            <tr ondragenter='setCurSwap();' ondragover="setCurSwap();">
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectRow();">MOVE ROW[2]</td>
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectCell();">1DDDD</td>
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectCell();">2EEEE</td>
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectCell();">3FFFF</td>
            </tr>

            <tr ondragenter='setCurSwap();' ondragover="setCurSwap();">
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectRow();">MOVE ROW[3]</td>
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectCell();">1GGGG</td>
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectCell();">2HHHH</td>
                <td><img src="javascript:setIco;" width="8" height="8" ondragstart="selectCell();">3IIII</td>
            </tr>

</table>

<hr>

<div id="csr">[Last Selected]</div>

<hr>

<form name="form1" method="post" action="" onSubmit="this.order.value=doSubmit()">
  <input type="hidden" name="order">
  <input type="submit" name="Submit" value="Submit">
</form>

<hr>

<pre>
<?php
  if(isset($_POST['order']))
  {
    $maka = $_POST['order'];
    echo($maka);
  }
?>

</pre>

</body>
</html>
0
 
LVL 1

Expert Comment

by:John-Doe
ID: 11848894
This do not only move rows up/down, but cells as well - and all in a drag-drop way.
Simply leftclick on the ico beside the cell and drop the cell where ever you want - or do the same with a row..

Br,
  -JD
0
 

Author Comment

by:soBC
ID: 11852179
Very slick....wonder if it'll work in IE 5.5...  
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question