SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    sort table after classes on rows

    Hi i have a problem.

    I am currently moving some rows from one table to another and back like this.

    Code:
    function moveTestcaseRowsToTestcases(){
    $('.testcase-ok-head').appendTo('.testresults');
    $('.testcase-failed-head').appendTo('.testresults');
    $('.testcase-skipped-head').appendTo('.testresults');
    $('.testcase-failed-skipped-head').appendTo('.testresults');
    
    }
    function moveTestcaseRowsToSumary(){
    $('.testcase-ok-head').appendTo('.allTestcases');
    $('.testcase-failed-head').appendTo('.allTestcases');
    $('.testcase-skipped-head').appendTo('.allTestcases');
    $('.testcase-failed-skipped-head').appendTo('.allTestcases');
    }

    Im moving this rows with these 4 classes from a table contaning also these classes "testcase-ok-row" "testcase-failed-row" "testcase-failed-message" "testcase-skipped-row" "testcase-skipped-message"

    The rows that have these classes also have other classes like for example
    "testcase-decreased" etc.


    So now to my question.

    When i move the rows having the "head" classes from class "testresults" to "allTestcases" everything is fine. It is when I want to put the rows back that the problem occur.

    The "head" class rows are put at the bottom of the "testresults" table..

    And what I want to achieve is that when I put the rows back again, I want them to be put in the exact same place as they had before I moved them.
    "testcase-ok-head"
    "testcase-ok-row"
    "testcase-failed-head"
    "testcase-failed-message"
    "testcase-failed-message"
    etc.

    Can i accomplish this sort or is it easier to just make clones of the "head" class rows?

    If so, how do I accomplish to clone all the "head" classes??

    Thanks again for an amazing forum

  2. #2
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's my attempt. I define an array to give a ranking to the different classes of the rows that you will be moving. Then each time a row is moved I scroll through the existing elements in the new table until I find a row that has a higher score. When that occurs I insert the moved row before it. I haven't attempted to run this code yet, so consider it conceptual.

    PHP Code:
    <script type="text/javascript">
    var 
    testcaseOrderList = {"testcase-ok-head",
                            
    "testcase-ok-row",
                            
    "testcase-failed-head",
                            
    "testcase-failed-message",
                            
    "testcase-failed-message"};
                    
    function 
    moveTestcaseRowsToTestcases(){
        
    insertIntoListByOrder($('.testcase-ok-head'), $('.testresults'), testcaseOrderList);
        
    insertIntoListByOrder($('.testcase-failed-head'), $('.testresults'), testcaseOrderList);
        
    insertIntoListByOrder($('.testcase-skipped-head'), $('.testresults'), testcaseOrderList);
        
    insertIntoListByOrder($('.testcase-failed-skipped-head'), $('.testresults'), testcaseOrderList);

    }
    function 
    moveTestcaseRowsToSumary(){
        
    insertIntoListByOrder($('.testcase-ok-head'), $('.allTestcases'), testcaseOrderList);
        
    insertIntoListByOrder($('.testcase-failed-head'), $('.allTestcases'), testcaseOrderList);
        
    insertIntoListByOrder($('.testcase-skipped-head'), $('.allTestcases'), testcaseOrderList);
        
    insertIntoListByOrder($('.testcase-failed-skipped-head'), $('.allTestcases'), testcaseOrderList);
    }

    function 
    insertIntoListByOrder(newElementtargetElementorderList) {
        
    //get the moved elements score
        
    var newElementScore getElementScore(newElementorderList);
        
        
    //look through each of the child elements of the destination table
        
    $('>'targetElement).each(function  () {
            var 
    currentElement = $(this);
            
    //if the examined element has a higher score than the
            //moved element, placed the moved element before it
            
    currentElementScore getElementScore(currentElementorderList);
            if (
    currentElementScore newElementScore) {
                
    newElement.before(currentElement);
            }
        })

    }

    function 
    getElementScore(elementorderList) {
        var 
    elementScore = -1;
        
    //find the ranking of the moved element
        
    for (var i in orderList) {
            
    classname orderList[i];
            if (
    element.hasClass(classname)) {
                
    elementScore i;
                break;
            }
        }

        return 
    elementScore;
    }


    </script> 

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks fpr the help, very helpful. But it didn't quite work, because I have some testcase-failed-row and testfailed-failed-message and testcase-skipped-row etc under "testcase-failed-skipped-head". So I think the only sollution is to loop through the table in testresults and then put a number associated to each tablerow id.

    So any ideas how i can bind a number to an id that i can use to check in what order that each row comes in

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and another quastion what does ".each(function (){ stand for?

    what function am I to replace there, appendTo?

    Or is it right syntax to write like that?

    As you might notice im quite new at this.

    Thanks again

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Snowball,
    I'm not quite clear on what your situation is. Is there a demo page that you could link so we can see?

    So any ideas how i can bind a number to an id that i can use to check in what order that each row comes in
    If you want to map ID's to an order score there's a few things you can do. My recommendation would be to something similar to what I did for classes with some modifications to take advantage of the fact that each element can only have one ID (unlike classes, for which any given element can have more than one).

    PHP Code:

    var testcaseOrderList = {"testcase-ok-head"
                            
    "testcase-ok-row"
                            
    "testcase-failed-head"
                            
    "testcase-failed-message"
                            
    "testcase-failed-message"}; 

    function 
    getElementScore(elementorderList) { 
        
    //get the elements ID
        
    elementID element.attr(‘id’);
        
    //find the index of this ID in our array, which we will use as our score
        //inArray will return -1 if the ID is not in our list
        
    elementScore jQuery.inArray(elementID,orderList);

        return 
    elementScore

    Alternatively you could place the score in the ID itself.
    e.g. :
    "testcase-ok-head-01"
    "testcase-ok-row-02"
    "testcase-failed-head-03"
    "testcase-failed-message-04"
    "testcase-failed-message-05"

    You could then extract the score using:

    PHP Code:
    elementScore element.attr(‘id’).substr(-2,2); 
    I don't like this second method as it seems less elegant to start with, and it will turn into a real mess if you want to change the ordering or add an additional element to the ranking later.

    and another quastion what does ".each(function (){ stand for?
    .each() is a jQuery function which loops through each element in a jQuery object. In my example I used a selector to fetch all the direct children of the list, and then used .each() on that object to loop through each of those children.

    Looking back at my example, I'm not sure that the selector I used would work. Instead of :

    $('>', targetElement).each()

    A better choice would be:

    targetElement.children().each()

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Does jQuery retain the same ordering when you combine all of the selector together?

    Code javascript:
    function moveTestcaseRowsToTestcases () {
        $('.testcase-ok-head, .testcase-failed-head, .testcase-skipped-head, .testcase-failed-skipped-head').appendTo('.testresults');
    }
    function moveTestcaseRowsToSumary () {
        $('.testcase-ok-head, .testcase-failed-head, .testcase-skipped-head, .testcase-failed-skipped-head').appendTo('.allTestcases');
    }
    Last edited by paul_wilkins; Jun 21, 2010 at 16:02. Reason: added some commas
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't appear so. I just ran this code:

    PHP Code:
        <div class="one">one </div>
        <
    div class="two">two </div>
        <
    div class="three">three </div>
        <
    div class="four">four </div>

        <
    div id="container"></div>


        <
    script type="text/javascript">
            
    //$('.one, .two, .three, .four').appendTo($('#container'));
            
    $('.four, .three, .two, .one').appendTo($('#container'));
        
    </script> 
    In both cases the result was that the elements were placed in ascending order (i.e. "one", "two", "three", "four). Even if this did work the danger would be that as it is not documented behavior of the jQuery object the behavior could change and break your code.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Then it seems that the only appropriate technique is to loop through the children of a common parent, test whether they match, and append them to the appropriate destination.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •