?
Solved

Moving table rows up and down with javascript

Posted on 2004-08-19
8
Medium Priority
?
17,659 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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.

 
1
 
LVL 13

Expert Comment

by:StormyWaters
ID: 11846176
That's much, much different. It'll need some work.
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

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

Author Comment

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

Featured Post

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

752 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