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上不起作用

回答

相关问题