從javascript變量創建表格

Question

我從來沒有很好的編碼，我做的主要是PHP不是JavaScript。這是運行在Windows服務器上，我無法安裝任何新的東西。

我有一個網頁，別人建立，我想重新格式化。目前的是一個OpenLayers地圖。

我想把地圖上的信息放在桌子上。

PowerShell腳本將數據輸出到txt文件。

網頁導入的數據做了一些不同的事情。

我結束了三列我想放在桌子上的東西，那裏只有20行。

這是我到目前爲止嘗試過的。

<table id="myTable"> 
    <tr> 
    <td>Office</td> 
    <td>Server Ping</td> 
    <td>Circuit Ping</td> 
</table> 


function myCreateFunction() { 
    var table = document.getElementById("myTable"); 
    var row = table.insertRow(0); 
    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    var cell3 = row.insertCell(2); 
    cell1.innerHTML = fullname; 
    cell2.innerHTML = pingResultHTML; 
    cell3.innerHTML = circuitPrimaryResultHTML; 
    }; 

如果需要，我可以發佈更多或全部的網頁代碼。

我正在假設，如果變量可以用來填充地圖上的彈出信息，我應該能夠將它們重定向到表中。

編輯： 這是附加信息。 這是從txt文件調用數據的內容。

if (window.XMLHttpRequest) 
    {xmlhttp=new XMLHttpRequest(); 
} 
else 
{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}; 

xmlhttp.open("GET","latest_results_list.txt",false); 
xmlhttp.send(); 
xmlDoc=xmlhttp.responseText; 

var mySplitResult; 
mySplitResult = xmlDoc.split("\r\n"); 
for(i = 0; i < mySplitResult.length; i++) 
    { 
    var locationStringCleaned = mySplitResult[i].replace(/(\r\n|\n|\r)/gm,""); 


    officeParameters = locationStringCleaned.split(","); 
    officelocation = officeParameters[0]; 
    pingStatus = officeParameters[1]; 
    pingTime = officeParameters[2]; 
    primaryCircuit = officeParameters[3]; 
    primaryCircuitTime = officeParameters[4]; 


    addNewLocation(officelocation, pingStatus, pingTime, primaryCircuit, primaryCircuitTime); 

這增加了網站名稱。

 if (officename == "SHO"){ 
fullname = "Stevens Point, WI"; 
    } else if (officename == "RIC"){ 
fullname = "Richmond, VA"; 
    } else if (officename == "DAV"){ 
fullname = "Davenport, IA"; 
    } else if (officename == "GOL"){ 
fullname = "Goldsboro, NC"; 
    } else if (officename == "IRV"){ 
fullname = "Irvine, CA"; 
    } else if (officename == "MON"){ 
fullname = "Montgomery, AL"; 
    } else if (officename == "MAD"){ 
fullname = "Madison, WI"; 
    } else if (officename == "SAL"){ 
fullname = "Salem, OR"; 
    } else if (officename == "SCO"){ 
fullname = "Scottsdale, AZ"; 
    } else if (officename == "WES"){ 
fullname = "Westford, MA"; 
    } else if (officename == "FRE"){ 
fullname = "Freeport, IL"; 
    } else if (officename == "MIL"){ 
fullname = "Milwaukee, WI"; 
    } else if (officename == "AVI"){ 
fullname = "Stevens Point, WI"; 
    } else if (officename == "PLO"){ 
fullname = "Plover, WI"; 
    } else if (officename == "MADG"){ 
fullname = "Madison, WI"; 
    } else if (officename == "MADC"){ 
fullname = "Madison, WI"; 
    } else if (officename == "MADR"){ 
fullname = "Madison, WI"; 
    } else if (officename == "EDW"){ 
fullname = "Edwardsville, IL"; 
    } else if (officename == "CHA"){ 
fullname = "Charlotte, NC"; 

這些格式的文本顏色基於通過其他一些if語句運行後的ping。

pingResultHTML = "<span style='color:" + pingColor + "'>" + pingResult + " (" + pingTime + " ms)</span>"; 
circuitPrimaryResultHTML = "<span style='color:" + linkStatusPrimaryColor + "'>" + linkStatusPrimary + " (" + linkStatusPrimaryTime+ " ms)</span>"; 

這是txt文件中的數據示例。

MAD,GOOD,7,GOOD,7 
DAV,GOOD,30,GOOD,30 

Answer 1

首先，你需要適應在JavaScript理解的形式就像對象數據，地圖&無論.....

，那麼你只是需要迭代，像但─ 讓假設數據包含你映射。

var rowCount=1, 
table = document.getElementById("myTable"), 
tbdy = document.createElement('tbody'); 
    for (var k in data) { 
    var tr = document.createElement('tr'); 
     for (var j = 0; j < 3; j++){ 
      var td = document.createElement('td'); 
      td.appendChild(document.createTextNode((!j)?rowCount++:(j==1)?k:device[k])); 
      tr.appendChild(td); 
     } 
       tbdy.appendChild(tr); 
    } 
table.appendChild(tbdy); 

Answer 2

我建議使用類似OOP：

function MyTable(data) { 
     this.data = data; 
     this.rows = []; 
     this.container = document.createElement('table'); 
     this.body = document.createElement('tbody'); 
     this.container.appendChild(this.body); 
     this.render(); 
    } 

    MyTable.prototype.render = function(){ 
     this.body.innerHTML = ''; 
     for(var i = 0; i < this.data.length; i++){ 
      this.rows.push(new MyRow(this.data[i])); 
     } 
     for(var j = 0; j < this.rows.length; j++) { 
      this.body.appendChild(this.rows[j].container); 
     } 
    } 

    MyTable.prototype.setData= function(data){ 
     this.data = data; 
     this.rows = []; 
     this.render(); 
    } 

    function MyRow(data) { 
     this.container = document.createElement('tr'); 
     var name = document.createElement('td'); 
     name.innerHTML = data.name; 
     this.container.appendChild(name); 
    } 

    var myTable = new MyTable([{name: 'Joe'}, {name: 'Pit'}]); 
    document.body.appendChild(myTable.container); 
    //data update: 
    myTable.setData([{name: 'Alex'}, {name: 'Stephan'}]); 
    myTable.render();