?
Solved

Moving table rows up and down with javascript

Posted on 2004-08-19
8
Medium Priority
?
17,898 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.

 
1
 
LVL 13

Expert Comment

by:StormyWaters
ID: 11846176
That's much, much different. It'll need some work.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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?
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
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:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses
Course of the Month15 days, 17 hours left to enroll

850 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