JavaScript代碼在Chrome上工作，在IE和Firefox上不起作用

我在純JS中爲了教育原因創建了這個腳本。它向表格添加排序（當單擊標題時）。我決定這是非常有用的，並試圖在我的項目中使用它。它在谷歌瀏覽器（我在創建腳本時使用這個瀏覽器）上運行良好，但不在IE和Firefox上。你可以幫我嗎？JavaScript代碼在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 in cmp（a，b，type，asc）a和b在Firefox和IE中是'未定義的'，並且腳本在某處中斷，沒有任何東西被排序。

來源

2011-09-28 gisek

它沒有工作。你有錯誤嗎？問題是什麼？你可以把它放在http://jsfiddle.net/或http://jsbin.com/#javascript,html – epascarello

當它引用諸如DOM元素之類的環境特徵時，將它稱爲「純JS」是很奇怪的不一定在JS的所有實現中都有。 –

@ThomBlake，OP指的是沒有使用庫的事實。爲了捍衛任擇議定書並與硝普作鬥爭，我聲稱這是一個公認的術語。 jsfiddle使用它來表示同樣的事情。而且，即使不是每個實現都有DOM，它仍然是純粹的js，因爲它符合100％的ECMAScript標準。 – davin

一個問題是您正在使用Firefox中不支持的innerText屬性。有關（加載）的詳細信息，請參閱'innerText' works in IE, but not in Firefox。

編輯：我測試了你的代碼在Firefox中，我做的唯一的改變是從innerText到textContent，它的工作。

來源

2011-09-28 21:03:18

我並沒有瀏覽所有的代碼，特別是因爲你的描述很模糊：「不工作」很明顯 - 你不會問在這裏是否一切正常，所以要更具體一些，並試圖縮小問題範圍（從而減少代碼）可能是一個好主意。但從我看到的三秒鐘內，我看到你正在設置事件處理程序setAttribute。不是一個好主意（例如，請參閱this post）。這在某些版本的IE中不起作用（同樣，版本是你沒有指定的）。

要添加一件事：即使做elem.onclick = ...不是真的建議。這是舊的HTML 4.0方法。建議使用DOM事件模型，即（addEventListener等）。但是，然後有無數的跨瀏覽器問題，這就是爲什麼有js庫。因此，我建議將您的代碼移植到jQuery或其他類似的庫中，以使其具有真正的便攜性。

這是一個好主意，否則你最終只能重新發明輪子，可能不如多年有經驗的開發人員所做的那樣。而且，你可能會增加這個代碼，它會增長。 js庫的正確使用將有助於代碼的可伸縮性。

不，這不是您的問題的答案。如果你正在尋找解決問題的快速解決方案，那不是。但是，我強烈地感覺到，如果您希望代碼真正可用且可維護，那麼在短期內實施這一建議（儘管難度更大）是最佳選擇。

來源

2011-09-28 21:03:06 davin

JavaScript代碼在Chrome上工作，在IE和Firefox上不起作用

回答

相關問題