...

View Full Version : cell colouring



zee_no
06-24-2008, 07:21 AM
hey i have the following javascript




function showGraph() {
var x = document.getElementsByTagName("table");
for (var i=0; i< x.length; i++){
var rows = document.getElementsByTagName("tr");
rows[0].insertCell(7);
for (j = 1; j < rows.length; j++) {
var cell2=rows[0].cells[7];
cell2.innerHTML=" %Free Graph ";
cell2.setAttribute('id','tr1');
var cell = rows[j].insertCell(7);
cell.innerHTML = rows[j].cells[8].innerHTML;
cell.className = 'gCells';
cell.setAttribute('width', '50px');
var border = 100 - rows[j].cells[8].innerHTML;
cell.setAttribute('style', 'border-right-color:#FFFFFF;border-right-style:solid;border-right-width:'+border+'px;');
}
}
}


i need to colour a table cell value based on its contents. it is not happening accurately with this script. I have attached the ouput please tell me how to correct it i have been struggling to do this since days now.. please help...!!

Arbitrator
06-24-2008, 07:42 AM
i need to colour a table cell value based on its contents.Youíre going to have to be more specific than that. For example, what content results in which colors?

zee_no
06-24-2008, 07:54 AM
hey ab,

See if my table cell has values

99.3
89
56
75
45

I want my cell to be colored based on these values. If u can see the same in the picture i have attached.

Please tell me how to do so.

Also in the output everything is getting colored properly only, 2 value is not

Please help :(

Arbitrator
06-24-2008, 10:19 AM
See if my table cell has values

99.3
89
56
75
45

I want my cell to be colored based on these values. If u can see the same in the picture i have attached.I still donít understand what exactly you want. Iíll provide some code anyway that might help.


HTML: http://www.jsgp.us/demos/cf142693-dynamic-background-color.html
XHTML: http://www.jsgp.us/demos/cf142693-dynamic-background-color.xhtml

HTML Source Code


<!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html lang="en-Latn">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo for CodingForums.com Thread 142693 (HTML)</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2008-06-24">
<meta name="Revised" content="2008-06-24">
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html, h1 { color: black; font: 16px/1.2 sans-serif; }
html { background: #ded url("bg_c.png"); }
h1 { opacity: 0.8; padding: 2em; background: white; font-weight: bolder; }
a { color: black; }
table, caption { margin: 1em auto; border-collapse: collapse; }
caption, th { font-weight: bolder; }
caption, th, td { border: 1em solid silver; padding: 1em; background: white; background: hsla(360, 100%, 100%, 0.5); }
td { text-align: right; }
</style>
<!--[if IE]>
<style type="text/css" media="all">
h1 { zoom: 1; filter: alpha(opacity=80); }
</style>
<![endif]-->

</head>
<body>

<h1>Demo for <a href="http://www.codingforums.com/showthread.php?t=142693">CodingForums.com Thread 142693</a></h1>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Header A</th>
<td>99.3</td>
</tr>
<tr>
<th scope="row">Header B</th>
<td>89</td>
</tr>
<tr>
<th scope="row">Header C</th>
<td>56</td>
</tr>
<tr>
<th scope="row">Header D</th>
<td>75</td>
</tr>
<tr>
<th scope="row">Header E</th>
<td>45</td>
</tr>
</tbody>
</table>

<!--[if !IE]>-->
<script type="application/ecmascript" defer="defer">
var d = document;
var td_elements = d.getElementsByTagName("table").item(0).getElementsByTagName("td");
for (var i = 0; i < td_elements.length; i++) {
with (td_elements.item(i)) {
if (firstChild.nodeType === 3) {
switch (firstChild.data) {
case "45":
setAttribute("style", "background: lightblue;");
break;
case "56":
setAttribute("style", "background: palegoldenrod;");
break;
case "75":
setAttribute("style", "background: pink;");
break;
case "89":
setAttribute("style", "background: #ded");
break;
case "99.3":
setAttribute("style", "background: #eee");
}
}
}
}
</script>
<!--<![endif]-->

<!--[if IE]>
<script type="text/ecmascript" defer="defer">
var d = document;
var td_elements = d.getElementsByTagName("table").item(0).getElementsByTagName("td");
for (var i = 0; i < td_elements.length; i++) {
with (td_elements.item(i)) {
if (firstChild.nodeType === 3) {
switch (firstChild.data) {
case "45":
style.background = "lightblue";
break;
case "56":
style.background = "palegoldenrod";
break;
case "75":
style.background = "pink";
break;
case "89":
style.background = "#ded";
break;
case "99.3":
style.background = "#eee";
}
}
}
}
</script>
<![endif]-->

</body>
</html>

XHTML Source Code


<?xml version="1.0" encoding="utf-8"?>

<html xml:lang="en-Latn" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>Demo for CodingForums.com Thread 142693 (XHTML)</title>
<meta name="Author" content="Patrick Garies"></meta>
<meta name="Created" content="2008-06-24"></meta>
<meta name="Revised" content="2008-06-24"></meta>
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html, h1 { color: black; font: 16px/1.2 sans-serif; }
html { background: #ded url("bg_c.png"); }
h1 { opacity: 0.8; padding: 2em; background: white; font-weight: bolder; }
a { color: black; }
table, caption { margin: 1em auto; border-collapse: collapse; }
caption, th { font-weight: bolder; }
caption, th, td { border: 1em solid silver; padding: 1em; background: white; background: hsla(360, 100%, 100%, 0.5); }
td { text-align: right; }
</style>

</head>
<body>

<h1>Demo for <a href="http://www.codingforums.com/showthread.php?t=142693">CodingForums.com Thread 142693</a></h1>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Header A</th>
<td>99.3</td>
</tr>
<tr>
<th scope="row">Header B</th>
<td>89</td>
</tr>
<tr>
<th scope="row">Header C</th>
<td>56</td>
</tr>
<tr>
<th scope="row">Header D</th>
<td>75</td>
</tr>
<tr>
<th scope="row">Header E</th>
<td>45</td>
</tr>
</tbody>
</table>

<script type="application/ecmascript" defer="defer">
// <![CDATA[
var d = document;
var XHTML_NS = "http://www.w3.org/1999/xhtml";
var td_elements = d.getElementsByTagNameNS(XHTML_NS, "table").item(0).getElementsByTagNameNS(XHTML_NS, "td");
for (var i = 0; i < td_elements.length; i++) {
with (td_elements.item(i)) {
if (firstChild.nodeType === 3) {
switch (firstChild.data) {
case "45":
setAttributeNS(XHTML_NS, "style", "background: lightblue;");
break;
case "56":
setAttributeNS(XHTML_NS, "style", "background: palegoldenrod;");
break;
case "75":
setAttributeNS(XHTML_NS, "style", "background: pink;");
break;
case "89":
setAttributeNS(XHTML_NS, "style", "background: #ded");
break;
case "99.3":
setAttributeNS(XHTML_NS, "style", "background: #eee");
}
}
}
}
// ]]>
</script>

</body>
</html>

zee_no
06-24-2008, 10:43 AM
ok see i have posted a picture below

I want something like that

Arbitrator
06-24-2008, 12:08 PM
I want something like thatIím assuming that the first column is a bar representation of the second columnís content? In that case, your table is not well‐constructed since it has two columns with redundant information.

Imagine that a computer were to read your table. It would essentially read the same thing twice if the bars were image‐based (i.e., if the bar images had alt attributes containing the percentages as attribute values); have a column without data if the bars were CSS‐based (i.e., the bars would not be readable); and be gibberish if the bars were text‐based. Since the bars are to be script‐based, this would also mean that that the bar column would become meaningless in the absence of scripting regardless of whether you used images, CSS, or text to represent them.

With that said, I united the bars and percentages into a single column to deal with semantic issues.


HTML: http://www.jsgp.us/demos/cf142693-dynamic-bar.html
XHTML: http://www.jsgp.us/demos/cf142693-dynamic-bar.xhtml

HTML Source Code


<!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html lang="en-Latn">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo for CodingForums.com Thread 142693 #2 (HTML)</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2008-06-24">
<meta name="Revised" content="2008-06-24">
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html, h1 { color: black; font: 16px/1.2 sans-serif; }
html { background: #ded url("bg_c.png"); }
h1 { opacity: 0.8; padding: 2em; background: white; font-weight: bolder; }
a { color: black; }
table, caption { margin: 1em auto; border-collapse: collapse; }
caption, th { font-weight: bolder; }
caption, th, td { border: 1em solid silver; padding: 1em; background: white; background: hsla(360, 100%, 100%, 0.5); line-height: 1.5em; }
span { display: block; float: left; height: 1.5em; margin: 0 1em 0 0; border-left: 2px solid tan; background: black; }
</style>
<!--[if IE]>
<style type="text/css" media="all">
h1 { zoom: 1; filter: alpha(opacity=80); }
</style>
<![endif]-->

</head>
<body>

<h1>Demo for <a href="http://www.codingforums.com/showthread.php?t=142693">CodingForums.com Thread 142693</a> #2</h1>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Header A</th>
<td>99.3</td>
</tr>
<tr>
<th scope="row">Header B</th>
<td>89</td>
</tr>
<tr>
<th scope="row">Header B</th>
<td>0</td>
</tr>
<tr>
<th scope="row">Header C</th>
<td>56</td>
</tr>
<tr>
<th scope="row">Header D</th>
<td>75</td>
</tr>
<tr>
<th scope="row">Header E</th>
<td>45</td>
</tr>
</tbody>
</table>

<!--[if !IE]>-->
<script type="application/ecmascript" defer="defer">
var d = document;
var td_elements = d.getElementsByTagName("table").item(0).getElementsByTagName("td");
for (var i = 0; i < td_elements.length; i++) {
if (td_elements.item(i).firstChild.nodeType === 3 && !isNaN(parseFloat(td_elements.item(i).firstChild.data))) {
var span_element = d.createElement("span");
span_element.setAttribute("style", "width: " + td_elements.item(i).firstChild.data + "px;");
td_elements.item(i).insertBefore(span_element, td_elements.item(i).firstChild);
}
}
</script>
<!--<![endif]-->

<!--[if IE]>
<script type="text/ecmascript" defer="defer">
var d = document;
var td_elements = d.getElementsByTagName("table").item(0).getElementsByTagName("td");
for (var i = 0; i < td_elements.length; i++) {
if (td_elements.item(i).firstChild.nodeType === 3 && !isNaN(parseFloat(td_elements.item(i).firstChild.data))) {
var span_element = d.createElement("span");
span_element.style.width = td_elements.item(i).firstChild.data + "px";
td_elements.item(i).insertBefore(span_element, td_elements.item(i).firstChild);
}
}
</script>
<![endif]-->

</body>
</html>

XHTML Source Code


<?xml version="1.0" encoding="utf-8"?>

<html xml:lang="en-Latn" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>Demo for CodingForums.com Thread 142693 #2 (XHTML)</title>
<meta name="Author" content="Patrick Garies"></meta>
<meta name="Created" content="2008-06-24"></meta>
<meta name="Revised" content="2008-06-24"></meta>
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html, h1 { color: black; font: 16px/1.2 sans-serif; }
html { background: #ded url("bg_c.png"); }
h1 { opacity: 0.8; padding: 2em; background: white; font-weight: bolder; }
a { color: black; }
table, caption { margin: 1em auto; border-collapse: collapse; }
caption, th { font-weight: bolder; }
caption, th, td { border: 1em solid silver; padding: 1em; background: white; background: hsla(360, 100%, 100%, 0.5); line-height: 1.5em; }
span { display: block; float: left; height: 1.5em; margin: 0 1em 0 0; border-left: 2px solid tan; background: black; }
</style>

</head>
<body>

<h1>Demo for <a href="http://www.codingforums.com/showthread.php?t=142693">CodingForums.com Thread 142693</a> #2</h1>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Header A</th>
<td>99.3</td>
</tr>
<tr>
<th scope="row">Header B</th>
<td>89</td>
</tr>
<tr>
<th scope="row">Header B</th>
<td>0</td>
</tr>
<tr>
<th scope="row">Header C</th>
<td>56</td>
</tr>
<tr>
<th scope="row">Header D</th>
<td>75</td>
</tr>
<tr>
<th scope="row">Header E</th>
<td>45</td>
</tr>
</tbody>
</table>

<script type="application/ecmascript" defer="defer">
// <![CDATA[
var d = document;
var XHTML_NS = "http://www.w3.org/1999/xhtml";
var td_elements = d.getElementsByTagNameNS(XHTML_NS, "table").item(0).getElementsByTagNameNS(XHTML_NS, "td");
for (var i = 0; i < td_elements.length; i++) {
if (td_elements.item(i).firstChild.nodeType === 3 && !isNaN(parseFloat(td_elements.item(i).firstChild.data))) {
var span_element = d.createElementNS(XHTML_NS, "span");
span_element.setAttributeNS(XHTML_NS, "style", "width: " + td_elements.item(i).firstChild.data + "px;");
td_elements.item(i).insertBefore(span_element, td_elements.item(i).firstChild);
}
}
// ]]>
</script>

</body>
</html>

zee_no
06-24-2008, 12:32 PM
hey patrick,

No i just showed that are reference purpose, I will not have redundant data, the values n bar would be included in the same column. and yes the table would have other columns as well.

Thank you so much for your help

zee_no
06-24-2008, 02:14 PM
hey patrick one more question

Does the above code work for multiple tables on the same page.

Since u have specified d.getElementsByTagName("table").item(0)

Arbitrator
06-25-2008, 07:20 AM
hey patrick one more question

Does the above code work for multiple tables on the same page.

Since u have specified d.getElementsByTagName("table").item(0)Currently, the script will process every td element of only the first table element in the DOM. Only those td elements whose first child node is a text node are processed; the text nodeís value must be castable as a floating‐point number.

If you have multiple tables, you can loop through the node list d.getElementsByTagName("td") (i.e., all of the td nodes in the document). However, unless all of the relevant data is contained within td elements (versus th elements), that numeric data is contained within the first text node child of that td element (e.g., no container elements within the table cells), and there are no text nodes that meet the aforementioned requirements that you do not want to process, then youíll have to modify the script to find the data you want to use and filter out the data that you do not.

zee_no
06-26-2008, 01:24 PM
hey it is giving me errors in mutiple tables



function showgraph() {
var x = document.getElementsByTagName("table");
for (var i=0; i< x.length; i++){
var rows = document.getElementsByTagName("tr");
rows[0].insertCell(4);
var cell2 = rows[0].cells[4];
cell2.innerHTML=" %Free Graph ";
cell2.setAttribute('id','tr1');

for (j = 1; j < rows.length; j++) {
var cell = rows[j].insertCell(4);
var width = rows[j].cells[5].innerHTML;
cell.setAttribute('width', '100px');

cell.innerHTML = "<span style=\"background-color:#000000;width:"+width+"\"></span>";
}
}
}




css code




span {
background:black none repeat scroll 0%;
display:block;
height:1.5em;
}
.gCells{
background-color:#336699;
}
#tr1
{
color:#336699; background:#cccc99;
}

zee_no
06-29-2008, 02:25 PM
hey please help,

the code does not work for ie when i want to color the cell for .9 or .6 ...values

please tell me how to correct this



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum