Sort table after classes on rows

JavaScript
1

Hi i have a problem.

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

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 :slight_smile:

2

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.

3

It doesn’t appear so. I just ran this 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.

4

Does jQuery retain the same ordering when you combine all of the selector together?


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');
}
5

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).



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

function getElementScore(element, orderList) { 
    //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:

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

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 :slight_smile:

7

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.

<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(newElement, targetElement, orderList) {
	//get the moved elements score
	var newElementScore = getElementScore(newElement, orderList);
	
	//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(currentElement, orderList);
		if (currentElementScore > newElementScore) {
			newElement.before(currentElement);
		}
	})

}

function getElementScore(element, orderList) {
	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>
8

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 :slight_smile: