Solved

Moving table rows up and down with javascript

Posted on 2004-08-19
8
17,560 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.

 
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 11846176
That's much, much different. It'll need some work.
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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

Turn Insights into Action

Communication across every corner of your business is essential to increase the velocity of your application delivery and support pipeline. Automate, standardize, and contextualize your communication processes with xMatters.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
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.

717 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