Solved

Moving table rows up and down with javascript

Posted on 2004-08-19
8
17,506 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

740 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