javascript to re-order rows

Discussion in 'Web Design and Development' started by design-is, Jul 9, 2010.

  1. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #1
    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
     
  2. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #2
    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.
     
  3. aarond12 macrumors 65816

    aarond12

    Joined:
    May 20, 2002
    Location:
    Dallas, TX USA
    #3
    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-
     
  4. eponym macrumors 6502

    Joined:
    Jul 2, 2010
    #4
    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);
    	});
    });
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    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=0b=rows.lengtha<ba++)
        {
            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);
            }
        }
    }
     
  6. design-is thread starter macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #6
    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!
     
  7. stndn macrumors member

    Joined:
    Oct 22, 2006
    Location:
    earth
    #7
    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="http://forums.macrumors.com/showthread.php?t=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.
     
  8. eponym macrumors 6502

    Joined:
    Jul 2, 2010
    #8
    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);
     
  9. design-is thread starter macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #9
    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
     

Share This Page