Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Nov 17, 2012, 04:53 PM   #1
AGWright
macrumors newbie
 
Join Date: Jun 2010
Set background colour by JavaScript

using this code the alerts tell me what row and cell the word "Entered" is in - is there a way I can set the background colour to red for that row ?

Code:
<html>
<head>
</head>
<body >
  
  <table id='myTable' border="1px" >
<TR>
<TD>09/11/2012</TD>
<TD>TESTA</TD>
<TD>TESTB</TD>
<TD>TESTC</TD>
</TR>
<TR>
<TD>09/11/2012</TD>
<TD>TESTD</TD>
<TD>TESTE</TD>
<TD>TESTF</TD>
</TR>
<TR>
<TD>09/11/2012</TD>
<TD>TESTG</TD>
<TD>TESTH</TD>
<TD>ENTERED</TD>
</TR>
</table>
  <script type="text/javascript">
 
    
var mytable = document.getElementById("myTable")
var  ttl;
var j;
var col;
// Loop through all rows and columns of the table and popup alert with the value
// /content of each cell.
for ( var i = 0; row = mytable.rows[i]; i++ )
{
   row = mytable.rows[i];
   for ( var j = 0; col = row.cells[j]; j++ )
   {
      var TextfromCells = (col.innerHTML);
      if(TextfromCells.indexOf("ENTERED") != -1)
      {
        alert("ENTERED" );
        alert("Row"+(i+1));
        alert("Cell"+(j+1));
      }
   }
}

</script>
</body>
</html>
AGWright is offline   0 Reply With Quote
Old Nov 17, 2012, 09:40 PM   #2
Darth.Titan
macrumors 68020
 
Darth.Titan's Avatar
 
Join Date: Oct 2007
Sorry, can't help much with raw javascript. JQuery has me spoiled.
PHP Code:
<html>
<
head>
<
script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body >
  
  <table id='myTable' border="1px">
<TR>
<TD>09/11/2012</TD>
<TD>TESTA</TD>
<TD>TESTB</TD>
<TD>TESTC</TD>
</TR>
<TR>
<TD>09/11/2012</TD>
<TD>TESTD</TD>
<TD>TESTE</TD>
<TD>TESTF</TD>
</TR>
<TR>
<TD>09/11/2012</TD>
<TD>TESTG</TD>
<TD>TESTH</TD>
<TD>ENTERED</TD>
</TR>
</table>

<script type="text/javascript">
$(function(){
    var entered = $('td:contains("ENTERED")');
    if (entered){
        var col = entered.index() + 1;
        var tr = entered.closest('tr');
        var row = tr.index() + 1;
        alert("ENTERED\nRow "+row+"\nCell "+col);
        tr.css('background','#ff0');
    }
});
/*    
var mytable = document.getElementById("myTable")
var  ttl;
var j;
var col;
// Loop through all rows and columns of the table and popup alert with the value
// /content of each cell.
for ( var i = 0; row = mytable.rows[i]; i++ )
{
   row = mytable.rows[i];
   for ( var j = 0; col = row.cells[j]; j++ )
   {
      var TextfromCells = (col.innerHTML);
      if (TextfromCells.indexOf("ENTERED") != -1)
      {
        alert("ENTERED" );
        alert("Row"+(i+1));
        alert("Cell"+(j+1));
      }
   }
}
*/
</script>
</body>
</html> 
Darth.Titan is offline   0 Reply With Quote
Old Nov 18, 2012, 01:45 AM   #3
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
For those not familiar, especially you front end UI folks, jQuery is a highly Javascript framework which is very cross-browser compatible with a solid core of features including many contributed plugins. Get it here. The above example posted by Darth.Titan is a perfect example of why people use it, so this is a must in any developer's toolbox. Pretty darned cool.

Another way to do it (no offense to Darth) using jQuery's filter method with alerts removed:

Code:
$(function(){
    $("table tr td").filter(function() {
        return $(this).text() == 'ENTERED';
    }).parent('tr').css('color','red');
});
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com

Last edited by SrWebDeveloper; Nov 18, 2012 at 01:53 AM. Reason: fixed a typo
SrWebDeveloper is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Changing Window Background Colour SRF OS X Mavericks (10.9) 7 Mar 5, 2014 03:52 AM
Settings background colour issue? RedllowFenix iOS 7 3 Sep 21, 2013 01:40 PM
phones: Can you change the background colour in settings on galaxy S4? The Game 161 Alternatives to iOS and iOS Devices 0 Apr 25, 2013 02:55 AM
System wide new background colour Gezedka OS X 1 Mar 8, 2013 06:35 AM

Forum Jump

All times are GMT -5. The time now is 05:42 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC