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可理解的形式调整数据，如object，map＆amp;无论.....

然后你需要像那样迭代 - 假设数据包含你的地图。

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();

从javascript变量创建表

2 个答案: