Set background colour by JavaScript

AGWright · Nov 17, 2012, 03:53 PM

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>

Darth.Titan · Nov 17, 2012, 08:40 PM

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>

SrWebDeveloper · 12:53 AM

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');
});

Nov 18, 2012, 12:45 AM	#3
SrWebDeveloper macrumors 68000 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 12:53 AM. Reason: fixed a typo
	0

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Nov 17, 2012, 08:40 PM	#2
Darth.Titan macrumors 68020 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>
	0


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