JavaScript代碼在chrome上有效，在IE和Firefox上無效

Question

出於教育原因，我在純JS中創建了此腳本。 它將對表添加排序（單擊標題時）。 我認為它非常有用，並嘗試在我的項目中使用它。 它在Google Chrome（在創建腳本時使用了該瀏覽器）上運行良好，但在IE和Firefox上卻無法使用。 你能幫助我嗎？

alert("Remember to add LoadSetup function to window.onload event and to remove this alert.\nAlso remember that table you want to sort must have class 'sortable' and an unique id.\nThe table must be build properly using <thead> and <tbody> tags.")


function addLoadEvent(func) {
// Dobra funkcja która radzi sobie z dodawaniem nowych funkcji do zdażenia window.onload
    var oldonload = window.onload;
    if (typeof window.onload != 'function') window.onload = func;
    else {
        window.onload = function() {
            if (oldonload) oldonload();
            func();
        }
    }
}

window.onload = LoadSetup;

function LoadSetup()
{
    //find sortable tables and set sorting state to 0 (not sorted)  
    tables = document.getElementsByTagName("table");
    tablesStates = new Array(tables.length);

    for(var i=0;i<tables.length;i++){
        tableName = tables[i].getAttribute("id");
        if(hasClass(tables[i], "sortable") && tableName != null){
            tablesStates[tableName] = new Array();

            thead = tables[i].getElementsByTagName("thead")[0];
            header = thead.getElementsByTagName("tr")[0].getElementsByTagName("th");

            for(var j=0; j<header.length; j++){
                if(!hasClass(header[j], 'notsortable')){
                    tablesStates[tableName][header[j].innerHTML] = 0;
                    header[j].removeAttribute("onclick");
                    header[j].setAttribute("onclick", "sortTable('"+tableName+"', '"+header[j].innerHTML+"')");
                }
            }
        }
    }
}

function hasClass(ele, cls)
{
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

String.prototype.capitalize = function() {
// fajna funkcja
    return this.charAt(0).toUpperCase() + this.slice(1);
}
String.prototype.capitalizeAll = function() {
// fajna funkcja
    result = '';
    for(var i=0; i< this.length;i++)
        result += this.charAt(i).toUpperCase();
    return result;
}

function prepareStringForCmp(s){
    en = ['a','c','e','l','n','o','s','z','z','A','C','E','L','N','O','S','Z','Z'];
    pl = ['ą','ć','ę','ł','ń','ó','ś','ź','ż','Ą','Ć','Ę','Ł','Ń','Ó','Ś','Ź','Ż'];

    for(var i=0;i<pl.length;i++){
        regex = new RegExp(pl[i],"g");
        s = s.replace(regex,en[i]);
    }
    return s.capitalizeAll();
}

function cmpStr(a, b){
    //a=prepareStringForCmp(a);
    //b=prepareStringForCmp(b);
    if(a == b)return 0;
    else if(a > b) return 1;
    else return -1;
}
function cmpStrRev(a, b){return cmpStr(b, a);}

function cmpNum(a, b){ return a - b;}
function cmpNumRev(a, b){return cmpNum(b, a);}

function cmp(a,b,type,asc)
{
// returns -1 if a < b ---- in ascending mode ( asc=true)
// returns 1 is a > b ---- in ascending mode ( asc=true)
// returns 0 if a == b

    if(type == "number"){
        if(asc == true) return cmpNum(a,b);
        else return cmpNumRev(a,b);
    }
    else if(type == "date"){
        if(asc == true) return 0;
        else return 0;
    }
    else{
        if(asc == true) return cmpStr(a,b);
        else return cmpStrRev(a,b);

    }
}

/////////////////////////////////////////////////////////////
// Bubble Sort

function bubbleSortTable(tab, col, type, asc) {
    for(var i=0; i < tab.length; i++){
        for(var j=0; j< tab.length-1; j++){
            if(cmp(tab[j].getElementsByTagName("td")[col].innerText, tab[j+1].getElementsByTagName("td")[col].innerText, type, asc) > 0)
            {
                buf = tab[j].innerHTML;
                tab[j].innerHTML = tab[j+1].innerHTML;
                tab[j+1].innerHTML = buf;
            }
        }
    }
}

/////////////////////////////////////////////////////////////
// Quick Sort

function partitionTable(l, r, A, col, type, asc)
{
    x = A[l].getElementsByTagName("td")[col].innerText;
    i = l-1;
    j = r+1;
    while(true){
        while(true){
            j = j-1;
            if(cmp(A[j].getElementsByTagName("td")[col].innerText, x, type, asc) <= 0) break;
        }
        while(true){
            i = i+1;
            if(cmp(A[i].getElementsByTagName("td")[col].innerText, x, type, asc) >= 0) break;
        }

        if(i<j){
            buf = A[i].innerHTML;
            A[i].innerHTML = A[j].innerHTML;
            A[j].innerHTML = buf;
        }
        else return j;
    }

}

function qsortTable(l, r, A, col, type, asc)
{
//qsort(tablica, 0, tablica.lenght -1);
    if(l<r){
        q = partitionTable(l, r, A, col, type, asc);
        qsortTable(l, q, A, col, type, asc);
        qsortTable(q+1, r, A, col, type, asc);
    }
}

/////////////////////////////////////////////////////////////

function sortTable(id, colName){
// sorts table
// returns true if sorting done; otherwise false
// works for strings and numbers


    if(tablesStates[id][colName] >= 0) asc = true;
    else asc = false;

    tab = document.getElementById(id);
    thead = tab.getElementsByTagName("thead")[0];
    header = thead.getElementsByTagName("tr")[0].getElementsByTagName("th");
    tbody = tab.getElementsByTagName("tbody")[0];
    rows = tbody.getElementsByTagName("tr");

    col = -1;
    for(var i=0; i < header.length; i++){
        if(header[i].innerHTML == colName){
            col = i;
            colType = header[i].getAttribute("class");      
            break;
        }
    }
    if(col == -1) return false;

    // demanded header found

    bubbleSortTable(rows, col, colType, asc);
    //qsortTable(0, rows.length-1,rows, col, colType, asc);
    if(tablesStates[id][colName] >= 0) tablesStates[id][colName] = -1;
    else tablesStates[id][colName] = 1;
}

還有一個簡單的html：

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="sortTable.js"></script>
    <link rel="stylesheet" type="text/css" href="x.css" />
</head>
<body>
<div id="content_box">

<table class="sortable"  id="tabela1">
<thead>
    <tr><th>name</th><th class="number">age</th><th>city</th></tr>
</thead>
<tbody>
    <tr> <td>Jan</td> <td>21</td> <td>Gdańsk</td> </tr>
    <tr> <td>Andrzej</td> <td>17</td> <td>Warszawa</td> </tr>
    <tr> <td>Paweł</td> <td>112</td> <td>toruń</td> </tr>
    <tr> <td>Mateusz</td> <td>43</td> <td>Łomża</td> </tr>
        <tr> <td>ADAM</td> <td>21</td> <td>Gdańsk</td> </tr>
    <tr> <td>ŻANETA</td> <td>17</td> <td>Warszawa</td> </tr>
    <tr> <td>Paweł</td> <td>112</td> <td>toruń</td> </tr>
    <tr> <td>LEON</td> <td>43</td> <td>Łomża</td> </tr>
        <tr> <td>Jan</td> <td>21</td> <td>Gdańsk</td> </tr>
    <tr> <td>Andrzej</td> <td>17</td> <td>Warszawa</td> </tr>
    <tr> <td>FRYDERYK</td> <td>112</td> <td>toruń</td> </tr>
    <tr> <td>Mateusz</td> <td>43</td> <td>Łomża</td> </tr>
        <tr> <td>Jan</td> <td>21</td> <td>Gdańsk</td> </tr>
    <tr> <td>BALBINA</td> <td>17</td> <td>Warszawa</td> </tr>
    <tr> <td>ADAM</td> <td>112</td> <td>toruń</td> </tr>
    <tr> <td>TERESA</td> <td>43</td> <td>Łomża</td> </tr>
</tbody>
</table>
</div>
</body>
</html>

更詳細的描述：

LoadSetup-工作（並添加了排序功能）單擊標題時，它應該進行排序，並且在Chrome上進行。 比它看起來像這樣：sortTable >> bubbleSortTable >> cmp（a，b，type，asc）a和b中的cmp在Firefox和IE中是“未定義”的，而且腳本在某處中斷了，沒有任何排序。

Answer 1

我不會遍歷您的所有代碼，尤其是因為您的描述相當模糊：“不起作用”很明顯-您不會在這里詢問一切是否正常，因此要更具體一點並嘗試縮小問題范圍（因此，發布更少的代碼）可能是一個好主意。 但是從我給我的三秒鍾看，我看到您正在使用setAttribute設置事件處理程序。 這不是一個好主意（例如，請參閱這篇文章 ）。 這在某些版本的IE中不起作用（同樣，您未指定版本）。

再添加一件事：甚至不建議使用elem.onclick = ... 這是舊的HTML 4.0方法。 建議使用DOM事件模型，即（ addEventListener等）。 但是，接着就出現了無休止的跨瀏覽器問題，這就是為什么有js庫的原因。 因此，我建議將您的代碼移植到jQuery或其他此類庫中，以使事情真正可移植。

這是一個好主意，因為否則您將不得不重新發明輪子，並且可能不及多年的經驗豐富的開發人員所做的那樣。 此外，您可能會添加到此代碼中，並且它會不斷增長。 正確使用js庫將有助於代碼的可伸縮性。

不，這不是您的問題的答案。 如果您正在尋找快速解決此問題的方法，那不是。 但是我強烈認為，盡管在短期內很難（更難）實施此建議，但如果您希望該代碼真正可用和可維護，則是最好的選擇。

Answer 2

一個問題是您使用的是Firefox不支持的innerText屬性。 有關詳細信息，請參閱“ innerText”在IE中的工作原理，但不適用於Firefox 。

編輯：我在Firefox中測試了您的代碼，而我所做的唯一更改是從innerText到textContent，它起作用了。