stackoom
  简体   繁体   中英

Sorting table using javascript sort()

 原文  2012-11-13 23:28:21  0   2    javascript

Question

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() method. Maybe I am wrong, but it seems to me that using sort() would be faster.

Below is my attempt, however, I am definitely missing something. Is what I am trying to do feasible, or should I abandon it? Ideally, I would like to stay away from innerHTML and jQuery. Thanks

var index = 0; //Index to sort on.
var a = document.getElementById('myTable').rows;

//sort() doesn't work on collection
var b = [];
for (var i = a.length >>> 0; i--;) {
    b[i] = a[i];
}

var x_td, y_td;

b.sort(function(x, y) {
    //Having to use getElementsByTagName is probably wrong
    x_td = x.getElementsByTagName('td')[index].data;
    y_td = y.getElementsByTagName('td')[index].data;
    return x_td == y_td ? 0 : (x_td < y_td ? -1 : 1);
});

2 answers

solution1
 1 ACCPTED  2012-11-13 23:32:32

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

solution2
 1  2013-04-16 11:25:22

<!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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question JavaScript sort handler not sorting my table JavaScript array sort(function) to sort table rows- not sorting Sorting javascript array using function 'sort" Sorting table using only Javascript Using Javascript to sort table properly? Sort table not sorting input Javascript Sort not sorting correctly Javascript sort() is not sorting correctly Sorting HTML table by row data using Javascript Issue with table sorting using JavaScript and jQuery
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM