使用javascript將XML排序爲HTML表格

任何人都可以告訴我爲什麼我無法排序這張表嗎？我下載sorttable.js從這個站點：http://www.kryogenix.org/code/browser/sorttable/#ajaxtables 使用javascript將XML排序爲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"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="Content-Type" content="text/html"> 
     <title>XML Table Sorting</title> 
     <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> 
     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script> 
     <script type="text/javascript" src="jssort.js"></script> 
    </head> 

    <body> 
    <div id="wrapper"> 
     <h1>Sortable Table of Search Queries</h1> 

     <table id="sortableTable" class="sortable" cellspacing="0" cellpadding="0" ></table> 

    </div> 

    <script> 
    // load page and display table data 
r(function() 
{ 
    alert('DOM Ready!'); 
    loadXMLDoc(); 
    sortTheTable(); 
}); 
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()} 
function loadXMLDoc() 
{ 
    if (window.ActiveXObject) 
    { 
     var xmlDoc = new ActiveXObject('Microsoft.XMLDOM'); 
     xmlDoc.async = 'false'; 
     xmlDoc.load('Linux_Sort.xml'); 
    } 
    else 
    { 
     var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() 
     { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
      { 
       createTable(xmlhttp); 
      } 
     }; 
     xmlhttp.open("GET", "Linux_Sort.xml", false); 
     xmlhttp.send(); 

    } // end else 
} 
function createTable(xml) 
{ 
    var i; 
    var xmlDoc = xml.responseXML; 
    var tableInsert = '<thead><tr><th id="problem_header"><span>Problem Type</span></th><th><span>Task</span></th><th id="page_header"><span>Page No.</span></th><th id="risk_header"><span>Risk</span></th></tr></thead>'; 
    tableInsert +='<tbody>'; 
      var x = xmlDoc.getElementsByTagName("record"); 
      for (i = 0; i <x.length; i++) 
      { 
      tableInsert += '<tr><td class="lalign">' + 
      x[i].getElementsByTagName("actionplan")[0].childNodes[0].nodeValue + 
      '</td><td class="lalign">' + 
      x[i].getElementsByTagName("task")[0].childNodes[0].nodeValue + 
      "</td><td>" + 
      x[i].getElementsByTagName("pageNo")[0].childNodes[0].nodeValue + 
      "</td><td class='risk'>" + 
      x[i].getElementsByTagName("risk")[0].childNodes[0].nodeValue + 
      "</td></tr>"; 
      } 

    tableInsert += '</tbody>'; 
    document.getElementById("sortableTable").innerHTML = tableInsert; 
    // document.getElementByTagName("tbody").innerHTML = tableInsert; 
} 
function sortTheTable() 
{ 
    var newTableObject = document.getElementById("sortableTable") 
    sorttable.makeSortable(newTableObject); 
} 

</script> 
</body> 
</html>

下面是示例XML：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
<Linux xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 
    <record> 
     <actionplan> OAv </actionplan> 
     <task>something here</task> 
     <pageNo>6</pageNo> 
     <risk>3</risk> 
    </record> 
    <record> 
     <actionplan>Op</actionplan> 
     <task>something here</task> 
     <pageNo>7</pageNo> 
     <risk>3</risk> 
    </record> 
    <record> 
     <actionplan>Op</actionplan> 
     <task>something here</task> 
     <pageNo>9</pageNo> 
     <risk>2</risk> 
    </record> 
    <record> 
     <actionplan>Op</actionplan> 
     <task>something here</task> 
     <pageNo>10</pageNo> 
     <risk>2</risk> 
    </record> 
    <record> 
     <actionplan>Op</actionplan> 
     <task>Disal1 root login via SSH</task> 
     <pageNo>12</pageNo> 
     <risk>1</risk> 
    </record> 
    <record> 
     <actionplan>Op</actionplan> 
     <task>Disable send and accept ICMP redirects</task> 
     <pageNo>13</pageNo> 
     <risk>1</risk> 
    </record> 
</Linux>

我有表一塊工作。然而，我似乎無法把它排序。需要注意的是，該信息通過本地文件顯示以用於平板電腦瀏覽器。到目前爲止，它只在Firefox中顯示。

來源

2016-05-31 user3486667

您是否知道，通過使用ActiveX，您將受衆限制在支持ActiveX的Windows計算機和瀏覽器？ –

在完成XML加載後不會立即在頁面加載時觸發**排序表**。 –

@JimGarrison你有什麼建議嗎？我打開了。 – user3486667

把TBODY圈外：

var tableInsert = '<thead><tr><th id="problem_header"><span>Problem Type</span></th><th><span>Task</span></th><th id="page_header"><span>Page No.</span></th><th id="risk_header"><span>Risk</span></th></tr></thead>'; 
      tableInsert +='<tbody>'; 
      var x = xmlDoc.getElementsByTagName("record"); 
      for (i = 0; i <x.length; i++) 
      { 
      tableInsert += '<tr><td class="lalign">' + 
      x[i].getElementsByTagName("actionplan")[0].childNodes[0].nodeValue + 
      '</td><td class="lalign">' + 
      x[i].getElementsByTagName("task")[0].childNodes[0].nodeValue + 
      "</td><td>" + 
      x[i].getElementsByTagName("pageNo")[0].childNodes[0].nodeValue + 
      "</td><td class='risk'>" + 
      x[i].getElementsByTagName("risk")[0].childNodes[0].nodeValue + 
      "</td></tr>"; 
      } 

    tableInsert += '</tbody>';

也不要忘了周圍的ID雙引號：

var newTableObject = document.getElementById("sortableTable")

由於ActiveXObject的沒有方法檢查readyState，凌亂的方法是在使用setTimeout函數後調用sortTable

來源

2016-05-31 21:56:18

點擊標題行時仍然沒有排序。請記住，我正在使用本地文件進行演示。這不是在Web服務器上部署的。 – user3486667

您是否在控制檯收到任何錯誤？ –

請檢查我已編輯的答案的最後一行 –

使用javascript將XML排序爲HTML表格

回答

相關問題