Question

I am trying to sort a dynamically constructed table on the client side. So far I have done my research to discover JavaScript’s sort() method will take a callback. Here is what I have so far:

function retrvCatalog(e){
var merch = document.getElementById('merch');
var tRows = merch.rows;
var tBody = merch.tBodies;
var rowArr = [];
for (x in tRows){
    rowArr[x] = tRows[x];
}
rowArr.sort(function(a, b){
    if (a.cells.textContent < b.cells.textContent){
        return -1;
    }
    if(a.cells.textContent > b.cells.textContent){
        return 1;
    }
    return 0;
});
}

Stepping through it in Firebug, it appears to not change the order of the rows. Can someone please help me figure out what I am missing?

FINAL ALGORITHM

function retrvCatalog(e){
var fltr = e.id;
var merch = document.getElementById('merch');
var tblHead = merch.tHead;
merch.deleteTHead();
var tRows = merch.rows;
var rowArr = [];
for (var i=0; i<tRows.length; i++){
    rowArr[i] = tRows[i];
}
rowArr = rowArr.sort(function(a, b){
    if (fltr > 3){
        a = parseFloat(a.cells[fltr].innerHTML);
        b = parseFloat(b.cells[fltr].innerHTML);
    }
    else{
        a = a.cells[fltr].innerHTML;
        b = b.cells[fltr].innerHTML;
    }
    if (a>b){
        return 1;
    }
    if(a<b){
        return -1;
    }
    return 0;
});
while(merch.hasChildNodes()) {
    merch.removeChild(merch.firstChild);
}
merch.appendChild(tblHead);
for (i=0;i<rowArr.length;i++){
    merch.appendChild(rowArr[i]);
}
}

The final two columns in the row are numbers, so that is why the method to sort is slightly variable.

Answer 1

I’m not sure if I’m missing something, but I’m pretty sure you can’t use textContent on the cells array. You need to index cells so you know which column to actually sort on. If your rows have 4 columns each (or even if there’s only 1), you still need to tell the sort function which column to sort on.

So in your sort function, if you wanted to sort by the second column, you’d want something like:

rowArr.sort(function (a, b) {
    if (a.cells[1].textContent < b.cells[1].textContent) {
        return -1;
    } else if (a.cells[1].textContent > b.cells[1].textContent) {
        return 1;
    }
    return 0;
});

And I’m not sure what’s in your cells, but you may want to use .innerHTML, not .textContent.