is this posssible?

@landslideNov 27.2007

I have a drop down box and a dinamic table. When you make a selection it populates the table with number data. Now what I am trying to figure is how can I have certain items returned be a diffrent color if certain conditions are met. For example I want the highest number returned to be red. How can I do this? Thanks in advance

to post a comment

JavaScript

10 Comments(s) _↴

@mjdamatoNov 27.2007 — #What do ou want to be a different color: the text or the cell color? Also, it would help if you showed the code you are currently working with.

@landslideauthorNov 27.2007 — #I want the cell to be a different color. once i get to my other computer I will post some code. Its justs your simple table with a repeat region. Thanks for your reply.

@SmotsholleNov 27.2007 — #I think this can be solved by binding the cells to an array with ids

Example <td id="tablecell_1_5"> so you know this cell is on row 1, column 5

With 2 nested while loops you can loop over all cells.

Then with each cell you can get the contents (innerHTML) and with that information you can determine the color (.style.bgcolor if I'm not mistaken).

If this is still too vague, post your code and I'll be more specific.

@landslideauthorNov 27.2007 — #Here is my code

[CODE]<form id="form1" name="form1" method="get" action="">
 <label></label>
 <label></label>
 <div align="center">
 <p>
 <select name="DATE12">
 <option value="Select Date">Select Date</option>
 <option value="1/1/2008">01/01/2008</option>
 <option value="1/2/2008">01/02/2008</option>
 <option value="1/3/2008">01/03/2008</option>
 <option value="1/4/2008">01/04/2008</option>
 <option value="1/5/2008">01/05/2008</option>
 <option value="1/6/2008">01/06/2008</option>
 <option value="1/7/2008">01/07/2008</option>
 <option value="1/8/2008">01/08/2008</option>
 <option value="1/9/2008">01/09/2008</option>
 <option value="1/10/2008">01/10/2008</option>
 <option value="1/11/2008">1/11/2008</option>
 while (!Recordset1.EOF) {
 %><option value="<%=(Recordset1.Fields.Item("DATE12").Value)%>"><%=(Recordset1.Fields.Item("DATE12").Value)%></option>
 <%
 Recordset1.MoveNext();
 }
 if (Recordset1.CursorType > 0) {
 if (!Recordset1.BOF) Recordset1.MoveFirst();
 } else {
 Recordset1.Requery();
 }
 %>
 </select>
 <input type="submit" name="Submit" value="Submit" />
 </p>
 </div>
 <table border="1" cellpadding="0" cellspacing="0">
 <tr bgcolor="#FFFFFF">
 <td colspan="2"><div align="center"><strong>Application Peak Including
 Slippage</strong></div>        <div align="center"></div></td>
 <td bgcolor="#66CC66"><div align="center"><span class="style4"><%=(Recordset2.Fields.Item("APP1PEAK").Value)%></span></div></td>
 <td bgcolor="#66CC66"><div align="center"><span class="style4"><%=(Recordset3.Fields.Item("APP5PEAK").Value)%></span></div></td>
 <td bgcolor="#66CC66"><div align="center"><span class="style4"><%=(Recordset4.Fields.Item("APP6PEAK").Value)%></span></div></td>
 <td bgcolor="#66CC66"><div align="center"><span class="style4"><%=(Recordset5.Fields.Item("APP10PEAK").Value)%></span></div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset6.Fields.Item("APP11PEAK").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset7.Fields.Item("APP20PEAK").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset8.Fields.Item("APP21PEAK").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset9.Fields.Item("APP95PEAK").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset10.Fields.Item("APP100PEAK").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset11.Fields.Item("APP101PEAK").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset12.Fields.Item("APP102PEAK").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center"><span class="style2"><strong><%=(Recordset13.Fields.Item("APP110PEAK").Value)%></strong></span></div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset14.Fields.Item("APP231PEAK").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset15.Fields.Item("APP123PEAK").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset16.Fields.Item("APP125PEAK").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset17.Fields.Item("APP135PEAK").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset18.Fields.Item("APP137PEAK").Value)%></div>
 </div></td>
 </tr>
 <tr bgcolor="#FFFFFF">
 <td width="145"><div align="center" class="style2">
 <div align="center"><strong>Date</strong></div>
 </div></td>
 <td width="119"><div align="center" class="style2">
 <div align="center"><strong>Time</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>1</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>5</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>6</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>10</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>11</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>20</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>21</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>95</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>100</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>101</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>102</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>110</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>231</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>123</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>125</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>135</strong></div>
 </div></td>
 <td width="140"><div align="center" class="style2">
 <div align="center"><strong>137</strong></div>
 </div></td>
 </tr>
 <% while ((Repeat1__numRows-- != 0) && (!Recordset1.EOF)) { %>
 <tr bgcolor="#999999">
 <td bgcolor="#FFFFFF"><div align="center"><span class="style4"><%=(Recordset1.Fields.Item("DATE12").Value)%></span></div></td>
 <td bgcolor="#33CC00"><div align="center"><strong><span class="style5"><%=(Recordset1.Fields.Item("Time").Value)%></span></strong></div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App001").Value)%></div>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App100").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App101").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App102").Value)%></div>
 <td bgcolor="#66CC66"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App137").Value)%></div>
 </div></td>
 </tr>
 <%
 Repeat1__index++;
 Recordset1.MoveNext();
 }
 %>
 </table>
 </p>
 </form>
 </body>
 </html>
 <%
 Recordset1.Close();[/CODE]

Can you give me an example how to start the code on that. Thanks

@landslideauthorNov 27.2007 — #The only problem I see with binding the fields is that I do not know how many field will be in the table it depends on what is returned. It sounds like I need to ID each <td> so I will start there. Any other sujestions.

@landslideauthorNov 27.2007 — #Ok I id the repeat region I have

[CODE] <% while ((Repeat1__numRows-- != 0) && (!Recordset1.EOF)) { %>
 <tr bgcolor="#999999">
 <td bgcolor="#FFFFFF"><div align="center"><span class="style4"><%=(Recordset1.Fields.Item("DATE12").Value)%></span></div></td>
 <td bgcolor="#33CC00"><div align="center"><strong><span class="style5"><%=(Recordset1.Fields.Item("Time").Value)%></span></strong></div></td>
 <td bgcolor="#66CC66" id="App1"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App001").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App5"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App005").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App6"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App006").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App10"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App010").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App11"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App011").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App20"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App020").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App21"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App021").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App95"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App095").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App100"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App100").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App101"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App101").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App102"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App102").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App110"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App110").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App231"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App231").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App123"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App123").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App125"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App125").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App135"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App135").Value)%></div>
 </div></td>
 <td bgcolor="#66CC66" id="App137"><div align="center" class="style4">
 <div align="center"><%=(Recordset1.Fields.Item("App137").Value)%></div>
 </div></td>[/CODE]

Now how do I tell it to change bg color if Number is MAX in the coloum.

<script type="text/javascript">



</script> I way off I know it just an example to show what I am trying to do. Ay Ideas?

@landslideauthorNov 27.2007 — #Here is my latest attempt

[CODE]<script type="text/javascript">
 <!--
 function Lightup() { 
 var obj=document.forms["form1"]; 
 for (i=0;i<obj.length;i++) { 
 with (obj[i]) { 
 if (document.getElementById('App1') = "2") { 
 document.getElementById('App1').style.backgroundColor='#DBF18A';
 } 
 } 
 } 
 }
 //-->
 </script> [/CODE]

am I getting closer? Yeah yeah I suck at code im trying

@mjdamatoNov 28.2007 — #Here's a working example that you can retrofit to your needs:

&lt;html&gt;
 &lt;head&gt;
 
 &lt;script language = "javascript"&gt; 
 
 defaultColor = '#eeeeee';
 maxValueColor = '#ff0000';
 
 function highlightMax(tableID, column) {
 
 var maxValue = 0;
 
 if (!document.all || !document.getElementById) { return; }
 tableObj = document.getElementById(tableID);
 
 tableBody = tableObj.childNodes[0];
 //Iterrate through each row
 for (i=1; i&lt;tableBody.childNodes.length; i++) {
 //Create row object
 tableRow = tableBody.childNodes[i];
 //Check if it is a table row
 if (tableRow.nodeName == "TR") {
 //Create cell object
 tableCell = tableRow.childNodes[column];
 //Check if the object is a table cell
 if (tableCell.nodeName == "TD") {
 //Get the value of the cell from the column parameter
 cellValue = parseFloat(tableCell.innerHTML);
 //Set maxValue to new value if greater than maxValue
 maxValue = (cellValue&gt;maxValue)?cellValue:maxValue;
 }
 }
 }
 
 //Iterrate through each row again setting the BG color
 for (i=1; i&lt;tableBody.childNodes.length; i++) {
 //Create row object
 tableRow = tableBody.childNodes[i];
 //Check if it is a table row
 if (tableRow.nodeName == "TR") {
 //Create cell object
 tableCell = tableRow.childNodes[column];
 //Check if the object is a table cell
 if (tableCell.nodeName == "TD") {
 //Get the value of the cell from the column parameter
 cellValue = parseFloat(tableCell.innerHTML);
 tableCell.style.backgroundColor = (cellValue==maxValue) ? maxValueColor : defaultColor;
 }
 }
 }
 }
 
 &lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;table cellspacing="0" cellpadding="5" border="1" id="myGrid"&gt;
 &lt;tr style="color:White;background-color:#336699;font-weight:bold;"&gt;
 &lt;td&gt;First Name&lt;/td&gt;&lt;td&gt;Last Name&lt;/td&gt;&lt;td&gt;Email&lt;/td&gt;&lt;td&gt;Amt&lt;/td&gt;
 &lt;/tr&gt;
 
 &lt;tr style="background-color: #eeeeee;"&gt;
 &lt;td&gt;Bugs&lt;/td&gt;&lt;td&gt;Bunny&lt;/td&gt;&lt;td&gt;[email protected]&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;
 &lt;/tr&gt;
 
 &lt;tr style="background-color: #eeeeee;"&gt;
 &lt;td&gt;Mickey&lt;/td&gt;&lt;td&gt;Mouse&lt;/td&gt;&lt;td&gt;[email protected]&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="background-color: #eeeeee;"&gt;
 &lt;td&gt;Donald&lt;/td&gt;&lt;td&gt;Duck&lt;/td&gt;&lt;td&gt;[email protected]&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="background-color: #eeeeee;"&gt;
 &lt;td&gt;Dan&lt;/td&gt;&lt;td&gt;Marino&lt;/td&gt;&lt;td&gt;[email protected]&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr style="background-color: #eeeeee;"&gt;
 &lt;td&gt;Steve&lt;/td&gt;&lt;td&gt;Stchur&lt;/td&gt;&lt;td&gt;[email protected]&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 
 &lt;input type="button" onclick="highlightMax('myGrid', 3);" value="Button"&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@landslideauthorNov 28.2007 — #WOW I was way off. Ill try that thanks for your help.

@SmotsholleNov 29.2007 — #I know I'm getting a bit sidetracked here.

But just wondering. The whole node stuff (like childnode). Is it crossbrowser compatible, if so, I've got to look into it.

I've limited myself quite a lot in JS programming because I'm uncertain in the do's and dont's of JS programming when it comes to crossbrowser compatibility.

Also in #JavaScript _↴

Two functions onSubmit?How to make a Submit retrieve new pages based on a pull-down menu and buttons Framework or no framework...

Success!

Help @landslide spread the word by sharing this article on Twitter...

Tweet This

is this posssible?

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

is this posssible?

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴