Using variable from file as a style

[ryanmkilt]

I have the following code:

//stock code:
function el(tid) {return document.getElementById(tid);}
if (!Array.prototype.map) {// from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:map
Array.prototype.map = function (fun) {var len = this.length;if (typeof fun != "function") {throw new TypeError;}var res = new Array(len);var thisp = arguments[1];for (var i = 1; i < len; i++) {if (i in this) {res[i] = fun.call(thisp, this[i], i, this);}}return res;};}
function IO(U, V) { var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, false); X.setRequestHeader('Content-Type', 'text/html'); X.send(V ? V : '');return X.responseText;}


//custom code:

function boot(){
showColumn(5); // show 6th column
}

function splitter(a){ return a.split(/\|/g); }
function grabCol(a){ return a[this]; }

function showColumn( numCol ){
var elm = el("viewer");
if(!elm){ //create the data container on first run
elm = document.createElement("div");
elm.id = "viewer";
document.body.appendChild(elm); // change this to point to destination
}

var data = showColumn.data || (showColumn.data = IO("test.txt").split(/\r?\n/g).map(splitter) );
var myCol = data.map(grabCol, numCol );
var buffer = myCol.join(" ");
elm.innerHTML = buffer;
}

When I click a button it runs the boot(). This prints out the 6th column of my file, which are the values A, B, or C only. In my CSS i want to use A {color: blue} B{color: red} C{color: black}. I also have a table that is generated when I click that button that displays my file. There you can see each row and the 6th column will have a A, B, or C. For all the rows with A, I want it to apply the CSS sheet to it, and same for B and C. If anyone understands what I am saying, I was wondering if they could help me out here.

[opifex]

column+row.... so this is actually tabular data

so you could adapt one of the many variations of "tiger" or "zebra" tables to suit your needs. example:

function threeRows() {
el = document.getElementsByTagName("table");
for (i = 0; i < el.length; i++)
if (el[i].className == "tableRows") {
rows = el[i].getElementsByTagName("tr");
for (j = 0; j < rows.length; j++)
rows[j].className = "row" + (j % 3);
}
}

and the css would be:

.row0 {
color: black;
}

.row1 {
color: red;
}

.row2 {
color: blue;
}

maybe?

[ryanmkilt]

I'm not sure what this is supposed to do? The 6th column in my table is A, B, or C. If it is A, i want a color, B a color and C a color. I'm not sure if i get your code and what it is doing?

[opifex]

maybe i don't understand your question!


what this will do is assign a different color to every third row in the column as you asked...

For all the rows with A, I want it to apply the CSS sheet to it, and same for B and C. If anyone understands what I am saying, I was wondering if they could help me out here.

guess i didn't understand what you are saying!
do you have an example of what you are trying to do????

[ryanmkilt]

I have a file that looks like this:


1,2,3,4,5,A,6
z,x,c,v,b,B,l
q,w,e,r,t,A,y
q,e,c,t,s,C,i
q,e,r,t,s,C,a
i,p,q,e,r,A,g

I am reading this file using javascript. I output it to a table in HTML. So i have this table and as you can see the 6th column is either an A, B, or C. It is in no order, so I need to pick up the A, the B and the C as a variable and then use that variable as a CSS style.

[opifex]

ok ....
in your csv the sixth column will ALWAYS be A, B or C... or id there the possibility that something different might appear in the future?

[ryanmkilt]

always A B or C

[opifex]

the just base the tr style on the cell content like ths

var colorValue = document.getElementsByTagName("tr").value;

name the style what you want - and put it in your css