[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Wizzud wrote:
$('table') ... gets all tables
$('table').eq(1) ... gets the second table
$('#formelement').parent().parent().parent() ... gets the 'great-grandad' of
#formelement
or, to look back up the DOM for a table ...
var _find = $('#formelement');
while(!_find.is('table')){ _find = _find.parent(); }
...but I would recommend putting another test in this loop, just in case
#formelement doesn't have a table above it!
$('#formelement').parents('table:eq(0)');
--Klaus
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
$('table') ... gets all tables
$('table').eq(1) ... gets the second table
$('#formelement').parent().parent().parent() ... gets the 'great-grandad' of
#formelement
or, to look back up the DOM for a table ...
var _find = $('#formelement');
while(!_find.is('table')){ _find = _find.parent(); }
...but I would recommend putting another test in this loop, just in case
#formelement doesn't have a table above it!
Mike Miller-13 wrote:
Hi,
Thanks for the tip...the one other question I have related to this
that I need to move these rows in a table that has no id. The table
does have form elements that have id's and I could do something like
this in JS
document.getElementById(formelement).parentNode.parentNode.parentNode
- this gets a ref to the table
Likewise
document.getElementsByTagName(table) and then navigate to the
particular table element I am interested in.
Question now becomes...how do I do either one of those javascript
functions I am familiar with...with jquery/
M
On Jul 31, 2:57 am, Dave Probert [EMAIL PROTECTED] wrote:
Or for more detailed movement:
$('tr:eq(3)').insertBefore('tr:eq(1)');
or
$('tr:eq(2)').insertAfter('tr:eq(5)');
Note: the numbers are the row count - beginning at 0 (zero) for the
first row.
Lookup the jquery :xxx qualifiers for more options.
On Jul 31, 4:16 am, Mike Miller [EMAIL PROTECTED] wrote:
Haven't been able to find any documentation so far that talks about
how to move rows around with jquery. Don't really need to sort the
whole table...rather I want to move one row to another position. Can
this be done?- Hide quoted text -
- Show quoted text -
--
View this message in context:
http://www.nabble.com/Anything-similar-to-IE%27s-table.moveRow-in-jquery--tf4179383s15494.html#a11960409
Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Klaus Hartl wrote:
$('#formelement').parents('table:eq(0)');
Even simpler.
NOTE: In documentation of parents(), first example is misleading/incorrect
in that shows the returned items in reverse order.
--
View this message in context:
http://www.nabble.com/Anything-similar-to-IE%27s-table.moveRow-in-jquery--tf4179383s15494.html#a11961595
Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Some simple plugins that may help.
(function($) {
$.fn.moveRowAfter = function(index, afterIndex)
{
this.find(tr).eq(index).insertAfter(this.find(tr).eq(afterIndex));
return this;
};
$.fn.moveRowBefore = function(index, beforeIndex)
{
this.find(tr).eq(index).insertBefore(this.find(tr).eq(beforeIndex));
return this;
};
})(jQuery);
Usage:
// move first row after fourth row (won't do anything if there are
less than 4 rows in the table)
$(table tbody).moveRowAfter(0, 3);
On Jul 30, 10:16 pm, Mike Miller [EMAIL PROTECTED] wrote:
Haven't been able to find any documentation so far that talks about
how to move rows around with jquery. Don't really need to sort the
whole table...rather I want to move one row to another position. Can
this be done?
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Sam...what plugins are you refering to with the moveRowAfter?
M
On Aug 2, 2:24 am, Wizzud [EMAIL PROTECTED] wrote:
$('table') ... gets all tables
$('table').eq(1) ... gets the second table
$('#formelement').parent().parent().parent() ... gets the 'great-grandad' of
#formelement
or, to look back up the DOM for a table ...
var _find = $('#formelement');
while(!_find.is('table')){ _find = _find.parent(); }
...but I would recommend putting another test in this loop, just in case
#formelement doesn't have a table above it!
Mike Miller-13 wrote:
Hi,
Thanks for the tip...the one other question I have related to this
that I need to move these rows in a table that has no id. The table
does have form elements that have id's and I could do something like
this in JS
document.getElementById(formelement).parentNode.parentNode.parentNode
- this gets a ref to the table
Likewise
document.getElementsByTagName(table) and then navigate to the
particular table element I am interested in.
Question now becomes...how do I do either one of those javascript
functions I am familiar with...with jquery/
M
On Jul 31, 2:57 am, Dave Probert [EMAIL PROTECTED] wrote:
Or for more detailed movement:
$('tr:eq(3)').insertBefore('tr:eq(1)');
or
$('tr:eq(2)').insertAfter('tr:eq(5)');
Note: the numbers are the row count - beginning at 0 (zero) for the
first row.
Lookup the jquery :xxx qualifiers for more options.
On Jul 31, 4:16 am, Mike Miller [EMAIL PROTECTED] wrote:
Haven't been able to find any documentation so far that talks about
how to move rows around with jquery. Don't really need to sort the
whole table...rather I want to move one row to another position. Can
this be done?- Hide quoted text -
- Show quoted text -
--
View this message in
context:http://www.nabble.com/Anything-similar-to-IE%27s-table.moveRow-in-jqu...
Sent from the JQuery mailing list archive at Nabble.com.- Hide quoted text -
- Show quoted text -
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Ok...so this is working somewhat...the issue I see now is that the
find() in the plugins are finding the wrong row.
My table structure looks like this:
table
- row1
- cell 1
-table
row 2
-cell 1
-table
row3
-cell 1
-table
When we use the parents(table eq:(0)) I get a reference to the main
table containing all of the nested tables...however when using the
find...it is finding rows within the nested table.
Is there a way to make the find pertain only to the parent?
Mike
On Aug 2, 10:44 am, Mike Miller [EMAIL PROTECTED] wrote:
Sam...what plugins are you refering to with the moveRowAfter?
M
On Aug 2, 2:24 am, Wizzud [EMAIL PROTECTED] wrote:
$('table') ... gets all tables
$('table').eq(1) ... gets the second table
$('#formelement').parent().parent().parent() ... gets the 'great-grandad' of
#formelement
or, to look back up the DOM for a table ...
var _find = $('#formelement');
while(!_find.is('table')){ _find = _find.parent(); }
...but I would recommend putting another test in this loop, just in case
#formelement doesn't have a table above it!
Mike Miller-13 wrote:
Hi,
Thanks for the tip...the one other question I have related to this
that I need to move these rows in a table that has no id. The table
does have form elements that have id's and I could do something like
this in JS
document.getElementById(formelement).parentNode.parentNode.parentNode
- this gets a ref to the table
Likewise
document.getElementsByTagName(table) and then navigate to the
particular table element I am interested in.
Question now becomes...how do I do either one of those javascript
functions I am familiar with...with jquery/
M
On Jul 31, 2:57 am, Dave Probert [EMAIL PROTECTED] wrote:
Or for more detailed movement:
$('tr:eq(3)').insertBefore('tr:eq(1)');
or
$('tr:eq(2)').insertAfter('tr:eq(5)');
Note: the numbers are the row count - beginning at 0 (zero) for the
first row.
Lookup the jquery :xxx qualifiers for more options.
On Jul 31, 4:16 am, Mike Miller [EMAIL PROTECTED] wrote:
Haven't been able to find any documentation so far that talks about
how to move rows around with jquery. Don't really need to sort the
whole table...rather I want to move one row to another position. Can
this be done?- Hide quoted text -
- Show quoted text -
--
View this message in
context:http://www.nabble.com/Anything-similar-to-IE%27s-table.moveRow-in-jqu...
Sent from the JQuery mailing list archive at Nabble.com.- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Mike Miller wrote:
Ok...so this is working somewhat...the issue I see now is that the
find() in the plugins are finding the wrong row.
My table structure looks like this:
table
- row1
- cell 1
-table
row 2
-cell 1
-table
row3
-cell 1
-table
When we use the parents(table eq:(0)) I get a reference to the main
table containing all of the nested tables...however when using the
find...it is finding rows within the nested table.
Is there a way to make the find pertain only to the parent?
Mike
Yes, change this.find('tr') to this.find('tr')
(function($) {
$.fn.moveRowAfter = function(index, afterIndex)
{
this.find(tr).eq(index).insertAfter(this.find(tr).eq(afterIndex));
return this;
};
...
})(jQuery);
Also the code could be optimized a bit to only perform one search for
the rows:
(function($) {
$.fn.moveRowAfter = function(index, afterIndex) {
var trs = this.find(tr);
trs.eq(--index).insertAfter(trs.eq(--afterIndex));
return this;
};
$.fn.moveRowBefore = function(index, beforeIndex) {
var trs = this.find(tr);
trs.eq(--index).insertBefore(trs.eq(--beforeIndex));
return this;
};
})(jQuery);
Next iteration! :-) The code of both methods looks very similiar, why
not make a single function out of it, save bytes and reduce possible
maintenancing:
jQuery.fn.moveRow = function(from, to, useBefore) {
var trs = this.find(tr);
trs.eq(--from)['insert' + (useBefore 'Before' ||
'After')](trs.eq(--to));
return this;
};
Usage:
$('table tbody').moveRow(4, 1); // insert after is default
$('table tbody').moveRow(4, 1, true); // insert before
Cheers, Klaus
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Klaus Hartl wrote:
Mike Miller wrote:
Ok...so this is working somewhat...the issue I see now is that the
find() in the plugins are finding the wrong row.
My table structure looks like this:
table
- row1
- cell 1
-table
row 2
-cell 1
-table
row3
-cell 1
-table
When we use the parents(table eq:(0)) I get a reference to the main
table containing all of the nested tables...however when using the
find...it is finding rows within the nested table.
Is there a way to make the find pertain only to the parent?
Mike
Yes, change this.find('tr') to this.find('tr')
(function($) {
$.fn.moveRowAfter = function(index, afterIndex)
{
this.find(tr).eq(index).insertAfter(this.find(tr).eq(afterIndex));
return this;
};
...
})(jQuery);
Also the code could be optimized a bit to only perform one search for
the rows:
(function($) {
$.fn.moveRowAfter = function(index, afterIndex) {
var trs = this.find(tr);
trs.eq(--index).insertAfter(trs.eq(--afterIndex));
return this;
};
$.fn.moveRowBefore = function(index, beforeIndex) {
var trs = this.find(tr);
trs.eq(--index).insertBefore(trs.eq(--beforeIndex));
return this;
};
})(jQuery);
Next iteration! :-) The code of both methods looks very similiar, why
not make a single function out of it, save bytes and reduce possible
maintenancing:
jQuery.fn.moveRow = function(from, to, useBefore) {
var trs = this.find(tr);
trs.eq(--from)['insert' + (useBefore 'Before' ||
'After')](trs.eq(--to));
return this;
};
Usage:
$('table tbody').moveRow(4, 1); // insert after is default
$('table tbody').moveRow(4, 1, true); // insert before
Cheers, Klaus
Excuse me, to keep the zero based index, use this:
jQuery.fn.moveRow = function(from, to, useBefore) {
var trs = this.find(tr);
trs.eq(from)['insert' + (useBefore 'Before' ||
'After')](trs.eq(to));
return this;
};
Usage:
$('table tbody').moveRow(3, 0);
--Klaus
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
ok Klaus,
Thanks for this...it truly is amazing what jquery can do. A quick
question for you though regarding the index property. If I want to
make this more dynamic...do you know how I would find out the value of
the rowIndex property for the table row I want to move?
On Aug 2, 1:17 pm, Klaus Hartl [EMAIL PROTECTED] wrote:
Klaus Hartl wrote:
Mike Miller wrote:
Ok...so this is working somewhat...the issue I see now is that the
find() in the plugins are finding the wrong row.
My table structure looks like this:
table
- row1
- cell 1
-table
row 2
-cell 1
-table
row3
-cell 1
-table
When we use the parents(table eq:(0)) I get a reference to the main
table containing all of the nested tables...however when using the
find...it is finding rows within the nested table.
Is there a way to make the find pertain only to the parent?
Mike
Yes, change this.find('tr') to this.find('tr')
(function($) {
$.fn.moveRowAfter = function(index, afterIndex)
{
this.find(tr).eq(index).insertAfter(this.find(tr).eq(afterIndex));
return this;
};
...
})(jQuery);
Also the code could be optimized a bit to only perform one search for
the rows:
(function($) {
$.fn.moveRowAfter = function(index, afterIndex) {
var trs = this.find(tr);
trs.eq(--index).insertAfter(trs.eq(--afterIndex));
return this;
};
$.fn.moveRowBefore = function(index, beforeIndex) {
var trs = this.find(tr);
trs.eq(--index).insertBefore(trs.eq(--beforeIndex));
return this;
};
})(jQuery);
Next iteration! :-) The code of both methods looks very similiar, why
not make a single function out of it, save bytes and reduce possible
maintenancing:
jQuery.fn.moveRow = function(from, to, useBefore) {
var trs = this.find(tr);
trs.eq(--from)['insert' + (useBefore 'Before' ||
'After')](trs.eq(--to));
return this;
};
Usage:
$('table tbody').moveRow(4, 1); // insert after is default
$('table tbody').moveRow(4, 1, true); // insert before
Cheers, Klaus
Excuse me, to keep the zero based index, use this:
jQuery.fn.moveRow = function(from, to, useBefore) {
var trs = this.find(tr);
trs.eq(from)['insert' + (useBefore 'Before' ||
'After')](trs.eq(to));
return this;
};
Usage:
$('table tbody').moveRow(3, 0);
--Klaus- Hide quoted text -
- Show quoted text -
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Mike Miller wrote:
Thanks for this...it truly is amazing what jquery can do. A quick
question for you though regarding the index property. If I want to
make this more dynamic...do you know how I would find out the value of
the rowIndex property for the table row I want to move?
Get it directly from the tr element:
var rowIndex = $('tr')[0].rowIndex;
That's shorter than using all jQuery:
var rowIndex = $('tr').attr('rowIndex');
The plugin could of course be changed to take tr elements instead of
passing indices and you don't need to handle the rowIndex:
jQuery.fn.moveRow = function(from, to, useBefore) {
var trs = this.find(tr);
$(from)['insert' + (useBefore 'Before' || 'After')](to);
return this;
};
Usage:
var from = $('tr:eq(3)'); // 4th row
var to = $('tr:eq(0)'); // 1st row
$('tbody').moveRow(from, to); // insert 4th row after 1st row
Is that what you need?
--Klaus
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Here is my snippet:
var myIndex = $j(#show_medication).parents(tr)...
#show_medication is a form element.
parents(tr) is the row containing the element
Now I want to get the rowIndex
Once I have the rowIndex property I would call the moveRow function as
follows:
$j(#show_medication).parents('table:eq(0)').moveRow(myIndex, myIndex-
someNumber, true)
Mike
On Aug 2, 1:46 pm, Klaus Hartl [EMAIL PROTECTED] wrote:
Mike Miller wrote:
Thanks for this...it truly is amazing what jquery can do. A quick
question for you though regarding the index property. If I want to
make this more dynamic...do you know how I would find out the value of
the rowIndex property for the table row I want to move?
Get it directly from the tr element:
var rowIndex = $('tr')[0].rowIndex;
That's shorter than using all jQuery:
var rowIndex = $('tr').attr('rowIndex');
The plugin could of course be changed to take tr elements instead of
passing indices and you don't need to handle the rowIndex:
jQuery.fn.moveRow = function(from, to, useBefore) {
var trs = this.find(tr);
$(from)['insert' + (useBefore 'Before' || 'After')](to);
return this;
};
Usage:
var from = $('tr:eq(3)'); // 4th row
var to = $('tr:eq(0)'); // 1st row
$('tbody').moveRow(from, to); // insert 4th row after 1st row
Is that what you need?
--Klaus
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Mike Miller wrote:
Here is my snippet:
var myIndex = $j(#show_medication).parents(tr)...
#show_medication is a form element.
parents(tr) is the row containing the element
Now I want to get the rowIndex
Once I have the rowIndex property I would call the moveRow function as
follows:
$j(#show_medication).parents('table:eq(0)').moveRow(myIndex, myIndex-
someNumber, true)
Mike
I see. Try:
var myIndex = $j(#show_medication).parents(tr)[0].rowIndex;
$j(#show_medication).parents('table:eq(0)').moveRow(myIndex,
myIndex-someNumber, true);
--Klaus
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Hi,
Thanks for the tip...the one other question I have related to this
that I need to move these rows in a table that has no id. The table
does have form elements that have id's and I could do something like
this in JS
document.getElementById(formelement).parentNode.parentNode.parentNode
- this gets a ref to the table
Likewise
document.getElementsByTagName(table) and then navigate to the
particular table element I am interested in.
Question now becomes...how do I do either one of those javascript
functions I am familiar with...with jquery/
M
On Jul 31, 2:57 am, Dave Probert [EMAIL PROTECTED] wrote:
Or for more detailed movement:
$('tr:eq(3)').insertBefore('tr:eq(1)');
or
$('tr:eq(2)').insertAfter('tr:eq(5)');
Note: the numbers are the row count - beginning at 0 (zero) for the
first row.
Lookup the jquery :xxx qualifiers for more options.
On Jul 31, 4:16 am, Mike Miller [EMAIL PROTECTED] wrote:
Haven't been able to find any documentation so far that talks about
how to move rows around with jquery. Don't really need to sort the
whole table...rather I want to move one row to another position. Can
this be done?- Hide quoted text -
- Show quoted text -
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Or for more detailed movement:
$('tr:eq(3)').insertBefore('tr:eq(1)');
or
$('tr:eq(2)').insertAfter('tr:eq(5)');
Note: the numbers are the row count - beginning at 0 (zero) for the
first row.
Lookup the jquery :xxx qualifiers for more options.
On Jul 31, 4:16 am, Mike Miller [EMAIL PROTECTED] wrote:
Haven't been able to find any documentation so far that talks about
how to move rows around with jquery. Don't really need to sort the
whole table...rather I want to move one row to another position. Can
this be done?
[jQuery] Re: Anything similar to IE's table.moveRow in jquery?
Mike Miller wrote:
Haven't been able to find any documentation so far that talks about
how to move rows around with jquery. Don't really need to sort the
whole table...rather I want to move one row to another position. Can
this be done?
The following should work as long as I'm not missing something:
$('tr:last-child').insertBefore('tr:first-child');
(moves last row to first)
--Klaus
