Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

javascript to re-order rows

design-is

design-is

macrumors 65816
Original poster
Oct 17, 2007
1,219
1
London / U.K.
Hi all

Javascript still isn't really my thing, so i wonder if anyone has any ideas on whether this is possible.

Basically, I've got to work with a table where some <tr> tags have a class of "hidden" and an in-line style of "display:none".

They are output that way for a reason I'm not too concerned with - but I know they need to be there, so can't just be removed.

Is there a way (Javascript I'm guessing, but any way would be good) to move all <tr class="hidden"> to the end of the table?

No idea if this is possible... thanks in advance for any help :)

/Doug
 
How about a php solution where you have two loops, one runs first echoing out all the rows that aren't hidden and the other echo's out all the rows that are hidden.
 
If you want to get ugly, you can create an iframe where you want the table, then "write()" to the iframe from your JavaScript with the contents of your table.

PHP: 
<html>
<head>
<title>Test</title>
<script language="JavaScript">
	function populateIframe() {
            var ifrm = document.getElementById('myIframe');
            ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
            ifrm.document.open();
            ifrm.document.write('Hello World!');
            ifrm.document.close();
        }
</script>
</head>
<body onLoad="populateIframe()">
<form name="myform">
	<iframe style="border: none;" id="myIframe"></iframe>
</form>
</body>

-Aaron-
 
Are you by chance using jQuery? It'd be easy if you were.

Code: 
$(document).ready(function(){
	$("tr.hidden").each(function(){
		var parentTable = $(this).closest("table");
		$(this).appendTo(parentTable);
	});
});
 
eponym said:
Are you by chance using jQuery? It'd be easy if you were.
Click to expand...

Would that move the row to the end, or copy it to the end?

Here's some untested code. May need to use cloneNode() before removing. At least in some browsers, doing the removeChild() will return that node so you can store it in a variable. Not sure if it's supported across browsers.

PHP: 
function moveHiddenRows()
{
	// Assuming one table
	var table = document.getElementsByTagName('table')[0];
	var rows = table.getElementsByTagName('tr');
	for (var a=0, b=rows.length; a<b; a++)
	{
		if (rows[a].className = 'hidden')
		{
			// Remove and store row
			var row = rows[a].parentNode.removeChild(rows[a]);
			// Append to end of table
			table.appendChild(row);
		}
	}
}
 
Thanks for all the suggestions guys & girls - Very much appreciated!

This is for some internal systems and all I'm really trying to achieve is visual striping using the CSS table tr:nth-child(odd). Having these extra, hidden trs are messing it up.

@babyjenniferLB - I'm pretty sure messing with the PHP side of things would have consequences beyond anything I want to be involved in. But will keep it in mind.

@aarond12 - This a little more ugly than I'm willing to get right now... thanks though ;)

@eponym - Same question as angelwatt. Would that move the row to the end, or copy it to the end?

@angelwatt - Looks very promising. I'll have a fiddle and let you know how it goes, thanks!
 
Here's another solution, similar to what's suggested by eponym.
This one uses YUI 3's Node instead of jQuery.

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Thread 963717 - Move tr to the end of table</title>
<script type="text/javascript" src="../yui311/yui/yui.js"></script>
</head>

<body>

<h1>Test code for MacRumors <a href="https://forums.macrumors.com/threads/963717/">Thread 963717</a></h1>

<p>Here is a sample original table</p>

<table id="tbl1" border="1" summary="original table">
<tr class="normal"><td>1</td><td>Sample 'normal' row, column 1</td><td>Sample 'normal' row, column 2</td></tr>
<tr class="normal"><td>2</td><td>Sample 'normal' row, column 1</td><td>Sample 'normal' row, column 2</td></tr>
<tr class="hidden"><td>3</td><td>Sample 'hidden' row, column 1</td><td>Sample 'hidden' row, column 2</td></tr>
<tr class="normal"><td>4</td><td>Sample 'normal' row, column 1</td><td>Sample 'normal' row, column 2</td></tr>
<tr class="hidden"><td>5</td><td>Sample 'hidden' row, column 1</td><td>Sample 'hidden' row, column 2</td></tr>
<tr class="normal"><td>6</td><td>Sample 'normal' row, column 1</td><td>Sample 'normal' row, column 2</td></tr>
</table>

<p>Here is the modified table</p>

<table id="tbl2" border="1" summary="test table">
<tr class="normal"><td>1</td><td>Sample 'normal' row, column 1</td><td>Sample 'normal' row, column 2</td></tr>
<tr class="normal"><td>2</td><td>Sample 'normal' row, column 1</td><td>Sample 'normal' row, column 2</td></tr>
<tr class="hidden"><td>3</td><td>Sample 'hidden' row, column 1</td><td>Sample 'hidden' row, column 2</td></tr>
<tr class="normal"><td>4</td><td>Sample 'normal' row, column 1</td><td>Sample 'normal' row, column 2</td></tr>
<tr class="hidden"><td>5</td><td>Sample 'hidden' row, column 1</td><td>Sample 'hidden' row, column 2</td></tr>
<tr class="normal"><td>6</td><td>Sample 'normal' row, column 1</td><td>Sample 'normal' row, column 2</td></tr>
</table>

<script type="text/javascript">
YUI().use('node', function(Y) {
   var altRows = Y.all ('#tbl2 tr.hidden');
   var tbl2 = Y.one ('#tbl2');

   altRows.each (function() {
      tbl2.insert (this);
   });
});
</script>

</body></html>

Using Web developer extension to View Generated Source, you can see that the 'hidden' table rows were moved to the end.


-stndn.
 
@eponym - Same question as angelwatt. Would that move the row to the end, or copy it to the end?
Click to expand...

It's moved, not copied.

You would have to clone() it first if you wanted to copy it.

i.e.

Code: 
$(this).clone().appendTo(parentTable);
 
Thanks again everyone + stndn!

eponym, that works a treat, I am forever indebted to you ;)

The system isn't using jQuery, but putting it into the mix doesn't seem to break anything.

Hopefully the people building the system won't complain...

/Doug

-EDIT-

Bugger... the system uses the prototype library, which apparently rules out jQuery (?) :(

-EDIT 2-

Worked fine with both libraries. However unfortunately my plans have been thwarted by some feature I wasn't informed of previously which needs the rows to stay where they are :(

Just went for a php solution to add new classes to the ones we needed in the end. Bit of a waste of efforts, but... Ah well
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back