Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Moving rows in a table

Reply
Thread Tools

Moving rows in a table

 
 
wmc
Guest
Posts: n/a
 
      12-27-2005
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
 
Reply With Quote
 
 
 
 
Evertjan.
Guest
Posts: n/a
 
      12-27-2005
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)
 
Reply With Quote
 
 
 
 
Evertjan.
Guest
Posts: n/a
 
      12-27-2005
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.nextSibl ing,
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)
 
Reply With Quote
 
wmc
Guest
Posts: n/a
 
      12-27-2005
Thanks,I'll give that a try!

--wmc
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Moving dynamically created table rows up and down in an HTML table T.G. Javascript 2 10-14-2008 12:56 PM
Free Moving Estimate, Local Movers, Long Distance Moving, PackingSupplies, Storage Rental, Home Moving, Apartment Moving, Office Moving,Commercial Moving linkswanted ASP .Net 0 01-06-2008 04:45 AM
script for moving rows up and down and traverse thru rows of HTML table Subba Rao via DotNetMonster.com ASP .Net 0 03-19-2005 06:46 AM
Table/table rows/table data tag question? Rio HTML 4 11-05-2004 08:11 AM
RE: Moving/adding Rows To an ASP:Table control =?Utf-8?B?TWFuaXNoIEphZGhhdg==?= ASP .Net 0 05-10-2004 05:01 PM



Advertisments