Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Nov 17, 2012, 03: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, 08: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, 12:45 AM   #3
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
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 12: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

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 11:33 PM.

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

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