Moving rows in a table

Discussion in 'Javascript' started by wmc, Dec 27, 2005.

  1. wmc

    wmc Guest

    I need to convert a desktop app to the web and would appreciate input
    from web developers who have created anything similar, or could point me
    to some resources on the web (I haven't worked on web apps for several
    years and feel kind of out of touch with all the latest stuff going on...)

    A simplified version of What I need to convert is the following... I
    have a grid with data in a window which holds a list of rules. The rules
    are added from another data control. The rules are order dependent and
    so I need to use a toolbar that contains first/up/down/last and changes
    the position of the selected rows and the row numbers. There are never a
    lot of rows, 20 to 30 would be a lot in this app.

    My question is, what's the best way do something on the client-side that
    will refresh the view. E.g. say I have 5 rules which are contained in an
    html table or an xml file if I have a ui that looks like this.

    __________________________________________________

    1 Rule_foo foo_attrib...
    2 Rule_bar bar-attrib...
    3 Rule_one one-attrib...
    4 Rule_two two_attrib...
    5 Rule_tre tre-attrib

    Move First | Move Up | Move Down | Move Last

    __________________________________________________




    Is there a good way to avoid a brute force, server redraws everything
    approach.

    Thanks...

    williamc
    wmc, Dec 27, 2005
    #1
    1. Advertising

  2. wmc

    Evertjan. Guest

    wmc wrote on 27 dec 2005 in comp.lang.javascript:

    > __________________________________________________
    >
    > 1 Rule_foo foo_attrib...
    > 2 Rule_bar bar-attrib...
    > 3 Rule_one one-attrib...
    > 4 Rule_two two_attrib...
    > 5 Rule_tre tre-attrib
    >
    > Move First | Move Up | Move Down | Move Last
    >
    > __________________________________________________
    >


    <table>
    <tr onclick='thisrow(this)'><td>1 -------------
    <tr onclick='thisrow(this)'><td>2 -------------
    <tr onclick='thisrow(this)'><td>3 -------------
    <tr onclick='thisrow(this)'><td>4 -------------
    <tr onclick='thisrow(this)'><td>5 -------------
    </table>

    <script type='text/javascript'>
    var whichrow=false

    function thisrow(x){
    if (whichrow) whichrow.style.backgroundColor='transparent'
    whichrow = x
    whichrow.style.backgroundColor='yellow'
    }
    </script>


    <button onclick='if (whichrow)
    whichrow.parentNode.insertBefore(whichrow,
    whichrow.previousSibling)
    else alert("First select a row, please!")'>
    Move Up</button>

    <button onclick='if (whichrow)
    whichrow.parentNode.insertBefore(whichrow,
    whichrow.parentNode.firstChild)
    else alert("First select a row, please!")'>
    Move First</button>

    ie6 tested.

    The Move up rotates, I don't know why!

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Dec 27, 2005
    #2
    1. Advertising

  3. wmc

    Evertjan. Guest

    Evertjan. wrote on 27 dec 2005 in comp.lang.javascript:

    > wmc wrote on 27 dec 2005 in comp.lang.javascript:
    >
    >> __________________________________________________
    >>
    >> 1 Rule_foo foo_attrib...
    >> 2 Rule_bar bar-attrib...
    >> 3 Rule_one one-attrib...
    >> 4 Rule_two two_attrib...
    >> 5 Rule_tre tre-attrib
    >>
    >> Move First | Move Up | Move Down | Move Last
    >>
    >> __________________________________________________
    >>

    >
    > <table>
    >


    more complete:

    <table>
    <tr onclick='thisrow(this)'><td>1 -------------
    <tr onclick='thisrow(this)'><td>2 -------------
    <tr onclick='thisrow(this)'><td>3 -------------
    <tr onclick='thisrow(this)'><td>4 -------------
    <tr onclick='thisrow(this)'><td>5 -------------
    </table>

    <br>
    <button onclick='moverow("up")'>Move Up</button>
    <button onclick='moverow("down")'>Move Down</button>
    <button onclick='moverow("first")'>Move First</button>
    <button onclick='moverow("last")'>Move Last</button>



    <script type='text/javascript'>
    var whichrow=false

    function thisrow(x){
    if (whichrow) whichrow.style.backgroundColor='transparent'
    whichrow = x
    whichrow.style.backgroundColor='yellow'
    }

    function moverow(x){
    if (whichrow) {
    if (x=='up'&&whichrow.previousSibling)
    whichrow.parentNode.insertBefore(whichrow,
    whichrow.previousSibling);
    else if (x=='down'&&whichrow.nextSibling)
    whichrow.parentNode.insertBefore(whichrow.nextSibling,
    whichrow);
    else if (x=='first')
    whichrow.parentNode.insertBefore(whichrow,
    whichrow.parentNode.firstChild);
    else if (x=='last')
    whichrow.parentNode.insertBefore(whichrow,null);
    } else
    alert("First select a row, please!");
    }
    </script>

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Dec 27, 2005
    #3
  4. wmc

    wmc Guest

    Thanks,I'll give that a try!

    --wmc
    wmc, Dec 27, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?TWFuaXNoIEphZGhhdg==?=

    RE: Moving/adding Rows To an ASP:Table control

    =?Utf-8?B?TWFuaXNoIEphZGhhdg==?=, May 10, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    410
    =?Utf-8?B?TWFuaXNoIEphZGhhdg==?=
    May 10, 2004
  2. William F. Robertson, Jr.

    Re: Moving/adding Rows To an ASP:Table control

    William F. Robertson, Jr., May 10, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    1,064
    William F. Robertson, Jr.
    May 10, 2004
  3. Subba Rao via DotNetMonster.com

    script for moving rows up and down and traverse thru rows of HTML table

    Subba Rao via DotNetMonster.com, Mar 19, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    8,196
    Subba Rao via DotNetMonster.com
    Mar 19, 2005
  4. Rio
    Replies:
    4
    Views:
    1,172
  5. T.G.
    Replies:
    2
    Views:
    1,052
Loading...

Share This Page