Skip to content Skip to sidebar Skip to footer

Sorting Table Using Javascript Sort()

I am trying to sort a table. I've seen several jQuery and JavaScript solutions which do this through various means, however, haven't seen any that use JavaScript's native sort() m

Solution 1:

A td element doesn't have a .data property.

If you wanted the text content of the element, and if there's only a single text node, then use .firstChild before .data.

Then when that is done, you need to append the elements to the DOM. Sorting a JavaScript Array of elements doesn't have any impact on the DOM.

Also, instead of getElementsByTagName("td"), you can just use .cells.

b.sort(function(rowx, rowy) {
    x_td = rowx.cells[index].firstChild.data;
    y_td = rowy.cells[index].firstChild.data;
    return x_td == y_td ? 0 : (x_td < y_td ? -1 : 1);
});

var parent = b[0].parentNode;

b.forEach(function(row) {
    parent.appendChild(row);
});

If the content that you're comparing is numeric, you should convert the strings to numbers.

If they are text strings, then you should use .localeCompare().

return x_td.localeCompare(y_td);

Solution 2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>All Sorting Techniques</title>
        <script type="text/javascript">

var a = [21,5,7,318,3,4,9,1,34,67,33,109,23,156,283];
function bubbleSort(a)
{
    var change;
    do {
        change = false;
        for (var i=0; i < a.length-1; i++) {
            if (a[i] > a[i+1]) {
                var temp = a[i];
                a[i] = a[i+1];
                a[i+1] = temp;
                change = true;
            }
        } 
    } while (change);
    document.getElementById("bublsrt").innerHTML = "Bubble Sort Result is:  "+a;
}
var b = [1,3,4,5,7,9,21,23,33,34,67,109,156,283,318];
function binarySearch(b, elem){
    var left = 0;
    var right = b.length - 1;
    while (left <= right){
    var mid = parseInt((left + right)/2);
    if (b[mid] == elem)
    return mid;
    else if (b[mid] < elem)
    left = mid + 1;
    else
    right = mid - 1;
    }
    return b.length;
}
function searchbinary(){
    var x = document.getElementById("binarysearchtb").value;
    var element= binarySearch(b,x);
    if(element==b.length)
    {
        alert("no. not found");
    }
    else
    {
        alert("Element is at the index number: "+ element);     
    }
}
function quicksort(a)
{
    if (a.length == 0)
        return [];
    var left = new Array();
    var right = new Array();
    var pivot = a[0];
     for (var i = 1; i < a.length; i++) {
        if (a[i] < pivot) {
           left.push(a[i]);
        } else {
           right.push(a[i]);
        }
    }
    return quicksort(left).concat(pivot, quicksort(right));
}
function quicksortresult()
{
    quicksort(a);
    document.getElementById("qcksrt").innerHTML = "Quick Sort Result is:  "+quicksort(a);
}
function numeric(evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode(key);
    var regex = /[0-9]|\./;
    if (!regex.test(key)) {
        theEvent.returnValue = false;
        if (theEvent.preventDefault) 
            theEvent.preventDefault();
    }
}
function insertionsorting(a)
{
    var len = a.length;     
    var temp;                     
    var i;
    var j;
        for (i=0; i < len; i++) {
        temp = a[i];
        for (j=i-1; j > -1 && a[j] > temp; j--) {
            a[j+1] = a[j];
        }
        a[j+1] = temp;
    }
    document.getElementById("insrtsrt").innerHTML = "Insertion Sort Result is:  "+a;
}
function hiddendiv()
{
    document.getElementById("binarytbdiv").style.display = "none";
    document.getElementById("Insertnotbdiv").style.display = "none";
}
function binarydivshow()
{
    document.getElementById("binarytbdiv").style.display = "block";
}
function insertnodivshow()
{
    document.getElementById("Insertnotbdiv").style.display = "block";
}
function insertno(a)
{
    var extrano = document.getElementById("Insertnotb").value;
    var b= a.push(extrano);
    var change;
    do {
        change = false;
        for (var i=0; i < a.length-1; i++) {
            if (a[i] > a[i+1]) {
                var temp = a[i];
                a[i] = a[i+1];
                a[i+1] = temp;
                change = true;
            }
        }
    } while (change);
    document.getElementById("insrtnosearch").innerHTML = "Sorted List is:  "+a;
    alert("Index of "+extrano +" is " +a.indexOf(extrano));
}


</script>
    </head>
    <body onload="hiddendiv()">
        <h1 align="center">All Type Of Sorting</h1>
        <p align="center">Your Array is : 21,5,7,318,3,4,9,1,34,67,33,109,23,156,283</p>
        <div id="main_div" align="center">
            <div id="bubblesort">
                <input type="button" id="bubblesortbutton" onclick="bubbleSort(a)" value="Bubble Sort">
                <p id="bublsrt"></p>
            </div><br>
            <div id="quicksort">
                <input type="button" id="quicksortbutton" onclick="quicksortresult()" value="Quick Sort">
                <p id="qcksrt"></p>
            </div><br>
            <div id="insertionsort">
                <input type="button" id="insertionsortbutton" onclick="insertionsorting(a)" value="Insertion Sort">
                <p id="insrtsrt"></p>
            </div><br>
            <div id="binarysearch">
                <input type="button" id="binarysearchbutton" onclick="binarydivshow();" value="Binary Search">
                <div id="binarytbdiv">
                    <input type="text" id="binarysearchtb" placeholder="Enter a Number" onkeypress="numeric(event)"><br>
                    <input type="button" id="binarysearchtbbutton" value="Submit" onclick="searchbinary()">
                    <p id="binarysrch">Sorted List is : 1,3,4,5,7,9,21,23,33,34,67,109,156,283,318</p>
                </div>
            </div><br>
            <div id="Insertno">
                <input type="button" id="insertno" onclick="insertnodivshow()" value="Insert A Number">
                <div id="Insertnotbdiv">
                    <input type="text" id="Insertnotb" placeholder="Enter a Number" onkeypress="numeric(event);"><br>
                    <input type="button" id="Insertnotbbutton" value="Submit" onclick="insertno(a)">
                    <p id="insrtnosearch"></p>
                </div>
            </div>
        </div>
    </body>
</html>

Post a Comment for "Sorting Table Using Javascript Sort()"