Solved

500-reward points and appriciation

Posted on 2006-07-13
8
274 Views
Last Modified: 2012-08-14
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.


Thanks for All in advance.
0
Comment
Question by:gotekareddy
8 Comments
 
LVL 10

Expert Comment

by:iamanindian
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

by:iamanindian
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

by:0h4crying0utloud
ID: 17109805


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

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:gotekareddy
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

by:Lo-Tan
ID: 17180786
Are you still needing this solution... if so I will attempt to write you a script.
0
 
LVL 4

Accepted Solution

by:
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>
      <HEAD>
      
      <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>
      
      </HEAD>
      
      <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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now