Set background colour by JavaScript

AGWright · Nov 17, 2012

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

Sorry, can't help much with raw javascript. JQuery has me spoiled.

PHP:

<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 · Nov 17, 2012

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

Search

Search

Set background colour by JavaScript

AGWright

macrumors newbie

Darth.Titan

macrumors 68030

SrWebDeveloper

macrumors 68000

Our Staff