Solved

# 500-reward points and appriciation

Posted on 2006-07-13
284 Views
Hi Experts,

I am having an interesting but some what critical problem in javascript...

I am having some elements in an array and i am displaying them in a table with each row having a checkbox and a serial number.

And i am having 2 buttons "MoveUp" and "MoveDown".

If i check the checkbox of 3rd row and click on MoveUp button the entire 3rd  row must be moved up so that it will be the 2nd row now and the previous second row now will be 3rd row.And the serial number must also be changed to 3 to 2 and 2 to 3.

MoveDown is just reverse of the above approach also.

I am having so many rows in a table.
so i want script or any suggestions on how to do that  for which i will really appriciate your approach.

0
Question by:gotekareddy
[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

LVL 10

Expert Comment

ID: 17106414
[QUOTE]
If i check the checkbox of 3rd row and click on MoveUp button the entire 3rd  row must be moved up so that it will be the 2nd row now and the previous second row now will be 3rd row.And the serial number must also be changed to 3 to 2 and 2 to 3.
[QUOTE]

3rd becomes 2nd; 2nd becomes 1st; What happens to the 1st row? It goes to last? Or is this a kind of swapping between two rows?

Regards
WC
0

LVL 10

Expert Comment

ID: 17106988
Ok...assuming that you are just asking to swap the values i.e. a row going up==replacing that row==interchanging places.
There is one straightforward process:

(1) Create the table with element ids in serial orer (e.g. id_1, id_2 etc.)
(2) While marking/clicking the checkbox (better use radio button...ensuring only one item is selected), capture the element ids (i.e. the clickable element & also the corresponding cell id).
(3) If one has clicked on "Move Up", as you know the current items id, just get the corresponding value...interchange with the previous elemts value.

This is a simple approach. This process basically takes the element ids & corresponding values in account...& thus...not the styles. That will take a little more work. But I hope this much will get you going.

Regards
WC
0

LVL 10

Expert Comment

ID: 17109805

Can you use radio buttons instead of checkboxes? cause what happens if the select more than one row?
0

Author Comment

ID: 17116606
The first row can only be moved down, and the last row can only be moved up... and only one element can be selected ata time as it is radio button.please give the function code that does all the requirement ,its greatly appriciated..

Thanks a lot..
0

LVL 4

Expert Comment

ID: 17180786
Are you still needing this solution... if so I will attempt to write you a script.
0

LVL 4

Accepted Solution

Lo-Tan earned 500 total points
ID: 17181092
Keep in mind htis code only moves the row that has a checked box.

If you have any questions, please ask.  The code is fully functional, the top row doesn't move up, the bottom row doesn't move down.
Also, the only way that I think this task is possible is by placing these elements inside of DIVs but in the HTML & script code below I made the output look very similar to a table.  Just please copy the contents (From <HTML> to </HTML>) into a file, rename it as html, and see how it works.  I would please like a box of cookies in addition if you like it!

Remember to check the box first!  (You can change these to radio buttons easily if you wish)

<HTML>

<script type="text/javascript">
// Replace the 20 here by the amount of spacing you have put in between each of your table rows
var divSpace = 23;
// The number of rows in the fake table.  If they are being generated, please determine a way to set this value yourself
var iElements = 6;

// Contains the order that all the divs are placed
// We have four elements, and all of them will start out in order... so!
var arElementPositions = new Array();
for( var i = 0; i < iElements; i++ )
arElementPositions[ i ] = "pos" + i;
// We can now pull the real location from this array to know where to move it and the adjacent element's id to move as well !

function moveUp( szId, szCheckId )
{
// Make sure this elements checkbox is checked
if( document.getElementById( szCheckId ).checked == false )
return;
// This can only take place if this div isn't in location ZERO
if( getElemPos( szId ) == 0 )
// We can't go anywhere!
return;
// The div to move up is this one
var divToMoveUp = document.getElementById( szId );
// Move div needs moved down (the one in the slot above this div)
var divAboveIndex = getElemPos( szId ) - 1;
var divToMoveDown = document.getElementById( getElemID(divAboveIndex) );
// Div to move up needs its top altered by -20px
var divToMoveUpTop = getIntegerFromPixels( divToMoveUp.style.top );
var divToMoveDownTop = getIntegerFromPixels( divToMoveDown.style.top );
// Perform the shift
divToMoveUp.style.top = divToMoveUpTop - divSpace;
divToMoveDown.style.top = divToMoveDownTop + divSpace;
// Alter the indexes accordingly
swapArrayValues( szId, getElemID(divAboveIndex) );
}
function moveDown( szId, szCheckId )
{
// Make sure this elements checkbox is checked
if( document.getElementById( szCheckId ).checked == false )
return;
// This can only take place if this div isn't in last place!
if( getElemPos( szId ) == (iElements - 1) )
// We can't go anywhere!
return;
// The div to move up is this one
var divToMoveDown = document.getElementById( szId );
// Move div needs moved down (the one in the slot above this div)
var divBelowIndex = getElemPos( szId ) + 1;
var divToMoveUp = document.getElementById( getElemID(divBelowIndex) );
// Div to move up needs its top altered by -20px
var divToMoveUpTop = getIntegerFromPixels( divToMoveUp.style.top );
var divToMoveDownTop = getIntegerFromPixels( divToMoveDown.style.top );
// Perform the shift
divToMoveUp.style.top = divToMoveUpTop - divSpace;
divToMoveDown.style.top = divToMoveDownTop + divSpace;
// Alter the indexes accordingly
swapArrayValues( szId, getElemID(divBelowIndex) );
}
function getIntegerFromPixels( szSize )
{
// Remove the sz
var szIndex = szSize.indexOf( "px" );
// If no px found, return zilch
if( szIndex == -1 )
return 0;
// Now lets select the integer text only and return its integer value
var szInt = szSize.substring( 0, szIndex );
return parseInt( szInt );
}
function getElemPos( szElementID )
{
for( var i = 0; i < iElements; i++ )
{
if( szElementID == arElementPositions[ i ] )
return i;
}
}
function getElemID( iIndex )
{
return arElementPositions[ iIndex ];
}
function swapArrayValues( szId1, szId2)
{
// Pull their current indices
var index1 = getElemPos( szId1 );
var index2 = getElemPos( szId2 );
// Perform the swap
arElementPositions[ index1 ] = szId2;
arElementPositions[ index2 ] = szId1;
}
</script>

<BODY>

<div id="pos0" style="width: 390px; color: #FFFFFF; background-color: #63D3EB; border-style: solid; border-color: black; border-width: 1px; position: absolute; top: 200px; left: 150px; height: 22px;">
<div style="float: left; width: 150px;"><input id="check0" type="checkbox">UTE879DD2</input></div> <div style="float: right;"><span style="position: relative; margin-left: 50px;"><input onclick="moveUp('pos0','check0');" type="button" value="Move up"></input><input onclick="moveDown('pos0','check0');" type="button" value="Move down"></input></span></div>
</div>
<div id="pos1" style="width: 390px; background-color: #E9F9FC;border-style: solid; border-color: black; border-width: 1px; position: absolute; top: 223px; left: 150px; height: 22px;">
<div style="float: left; width: 150px;"><input id="check1" type="checkbox">7876Z23782</input></div>  <div style="float: right;"><span style="position: relative; margin-left: 50px;"><input onclick="moveUp('pos1','check1');" type="button" value="Move up"></input><input onclick="moveDown('pos1','check1');" type="button" value="Move down"></input></span></div>
</div>
<div id="pos2" style="width: 390px; color: #FFFFFF; background-color: #63D3EB; border-style: solid; border-color: black; border-width: 1px; position: absolute; top: 246px; left: 150px; height: 22px;">
<div style="float: left; width: 150px;"><input id="check2" type="checkbox">G98A3789P</input></div>  <div style="float: right;"><span style="position: relative; margin-left: 50px;"><input onclick="moveUp('pos2','check2');" type="button" value="Move up"></input><input onclick="moveDown('pos2','check2');" type="button" value="Move down"></input></span></div>
</div>
<div id="pos3" style="width: 390px; background-color: #E9F9FC;border-style: solid; border-color: black; border-width: 1px; position: absolute; top: 269px; left: 150px; height: 22px;">
<div style="float: left; width: 150px;"><input id="check3" type="checkbox">EF9283E23</input></div>  <div style="float: right;"><span style="position: relative; margin-left: 50px;"><input onclick="moveUp('pos3','check3');" type="button" value="Move up"></input><input onclick="moveDown('pos3','check3');" type="button" value="Move down"></input></span></div>
</div>
<div id="pos4" style="width: 390px; color: #FFFFFF; background-color: #63D3EB;border-style: solid; border-color: black; border-width: 1px; position: absolute; top: 292px; left: 150px; height: 22px;">
<div style="float: left; width: 150px;"><input id="check4" type="checkbox">ASDFGHJK6</input></div>  <div style="float: right;"><span style="position: relative; margin-left: 50px;"><input onclick="moveUp('pos4','check4');" type="button" value="Move up"></input><input onclick="moveDown('pos4','check4');" type="button" value="Move down"></input></span></div>
</div>
<div id="pos5" style="width: 390px; background-color: #E9F9FC;border-style: solid; border-color: black; border-width: 1px; position: absolute; top: 315px; left: 150px; height: 22px;">
<div style="float: left; width: 150px;"><input id="check5" type="checkbox">123DFG211</input></div>  <div style="float: right;"><span style="position: relative; margin-left: 50px;"><input onclick="moveUp('pos5', 'check5');" type="button" value="Move up"></input><input onclick="moveDown('pos5','check5');" type="button" value="Move down"></input></span></div>
</div>

</BODY>

</HTML>
0

## Featured Post

Question has a verified solution.

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

### Suggested Solutions

15 puzzle in Javascript/html 2 92
JS to redirect to prev page 8 47
Make icons act like add/minus for qtys 6 44
Error Handler 8 46
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
###### Suggested Courses
Course of the Month1 day, 22 hours left to enroll