Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11

Thread: cell colouring

  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    60
    Thanks
    11
    Thanked 1 Time in 1 Post

    cell colouring

    hey i have the following javascript

    Code:
    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...!!
    Attached Thumbnails Attached Thumbnails cell colouring-output.jpg  

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by zee_no View Post
    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?
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    60
    Thanks
    11
    Thanked 1 Time in 1 Post
    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

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by zee_no View Post
    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 Source Code

    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

    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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    60
    Thanks
    11
    Thanked 1 Time in 1 Post
    ok see i have posted a picture below

    I want something like that
    Attached Thumbnails Attached Thumbnails cell colouring-untitled2.jpg  

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by zee_no View Post
    I want something like that
    I’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 Source Code

    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

    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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    zee_no (06-24-2008)

  • #7
    New Coder
    Join Date
    May 2008
    Posts
    60
    Thanks
    11
    Thanked 1 Time in 1 Post
    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
    Last edited by zee_no; 06-24-2008 at 12:36 PM.

  • #8
    New Coder
    Join Date
    May 2008
    Posts
    60
    Thanks
    11
    Thanked 1 Time in 1 Post
    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)

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by zee_no View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    zee_no (06-26-2008)

  • #10
    New Coder
    Join Date
    May 2008
    Posts
    60
    Thanks
    11
    Thanked 1 Time in 1 Post
    hey it is giving me errors in mutiple tables

    Code:
    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

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

  • #11
    New Coder
    Join Date
    May 2008
    Posts
    60
    Thanks
    11
    Thanked 1 Time in 1 Post

    does not work for ie

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •