Create table from javascript variables
I've never been good at coding and what I was doing was mostly PHP and not javascript. This works on a windows server and I have no way to install anything new.
I have a webpage that someone created that I am trying to reformat. Current - OpenLayers map.
I want to take information on a card and put it on the table.
PowerShell script outputs data to txt file.
The web page imports the data it does with several different things.
I ended up with three columns of things I want to put on the table and there are just shyly 20 rows.
This is what I have tried so far.
<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;
};
I can post more or all of the page code if needed.
I am working on the assumption that if variables can be used to populate information for popups on a map, I should be able to simply redirect them to a table.
Edit: Here's some more info. This is what calls the data from the txt file.
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);
This adds the site name.
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";
This format text color is based on ping after any other if commands have been executed.
pingResultHTML = "<span style='color:" + pingColor + "'>" + pingResult + " (" + pingTime + " ms)</span>";
circuitPrimaryResultHTML = "<span style='color:" + linkStatusPrimaryColor + "'>" + linkStatusPrimary + " (" + linkStatusPrimaryTime+ " ms)</span>";
This is an example of data in a txt file.
MAD,GOOD,7,GOOD,7 DAV,GOOD,30,GOOD,30
source to share
First, you need to adapt the data in a javascript-friendly form, such as an object, a map, etc.
then you just need to iterate over this, Let's assume the data contains a map.
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);
source to share
I suggest using something like 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();
source to share