Question

我需要从服务器获取一个文本文件并在一个表中显示它的内容。这个代码不知道什么是错的...................... .................................................. .................................................. .................................................. ...............................

<!DOCTYPE html>
<html>
 <meta charset="UTF-8"> 
    <head>
        <style type="text/css">
             body
             {
                 font-family: Arial;
                    font-size: 10pt;
             }
            table
            {
                 border: 1px solid #ccc;
             margin: auto;
             empty-cells: hide;
            }
             table th
             {
                 background-color: AQUA;
                    color: #333;
                    font-weight: bold;
                }
            table th, table td
             {
                 padding: 5px;
             border: 1px solid #ccc;
                 border-color: #ccc;
               }
        tr:hover {background-color: #f5f5f5;}
            </style>
    </head>
<body>
<div align = center>
<input type="text" id="filter" placeholder="Search" title="Type a name" >
</div>
<div id="demo" align = center>

</div>

<script>
window.onload = function() {
  var demo = document.getElementById("demo");
  if(window.XMLHttpRequest){
    var xhttp = new XMLHttpRequest();
    }
    else{
    var xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
//xhttp.onreadystatechange = function() {
 if (this.readyState == 4 && this.status == 200 || this.status == 0) {
  var responseText= xhttp.responseText;
  console.log(this.responseText);
  document.getElementById("filter").onkeyup = filterRows;
  var ROW_DELIMITER = "\n",
    CELL_DELIMITER = "  ";

  var tableObj = {
    headers: ["Time", "Duration", "Client address", "Result codes", "Bytes", "request method", "URL", "user", 

"Hierarchy code", "Type"], 
    rows: []
  };
}
 function convert(responseText) {
    tableObj.rows = convertToArray(responseText)
    buildTable(tableObj.headers, tableObj.rows);
  };

  function convertToArray(text) {
    return text.split(ROW_DELIMITER).map(function(row) {
      return row.split(CELL_DELIMITER);
    });
  }

  function filterRows() {
    var input = this;
    var rows = tableObj.rows.filter(function(row) {

      var matches = row.filter(function(cell) {
        return cell.toUpperCase().indexOf(input.value.toUpperCase()) > -1;
      });

      return matches.length > 0;
    });

    buildTable(tableObj.headers, rows);
  }

  function sortRows() {
    var th = this;
    var index = th.dataset.index;

    tableObj.rows.sort(function(rowA, rowB) {
      var textA = rowA[index].toUpperCase(),
        textB = rowB[index].toUpperCase();
      if (textA < textB) {
        return -1;
      }
      if (textA > textB) {
        return 1;
      }
      return 0;
    });

    buildTable(tableObj.headers, tableObj.rows);
  }

  function buildTable(headers, rows) {
    var table = document.createElement('table');
    var tr = document.createElement('tr');
    table.appendChild(tr);

    for (var i = 0; i < headers.length; i++) {
      th = document.createElement('th');
      tr.appendChild(th);
      th.innerHTML = headers[i];

      th.onclick = sortRows;

      th.dataset.index = i;
    }

    for (var j = 0; j < rows.length; j++) {
      tr = document.createElement('tr');
      table.appendChild(tr);
      for (var k = 0; k < rows[j].length; k++) {
        var td = document.createElement('td');
        tr.appendChild(td);
        td.innerHTML = rows[j][k];

        td.dataset.index = k;
      }
    }

    demo.innerHTML = '';
    demo.appendChild(table);
  }

 convert(responseText);
 xhttp.open("GET", "https://www.w3.org/TR/PNG/iso_8859-1.txt", true);
 xhttp.send(null);
};
</script>
</body>
</html>

如何从Web获取文本文件内容并将其制表

0 个答案: