Set background colour by JavaScript

Discussion in 'Web Design and Development' started by AGWright, Nov 17, 2012.

  1. macrumors newbie

    Joined:
    Jun 28, 2010
    #1
    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>
     
  2. macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    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>
     
  3. SrWebDeveloper, Nov 17, 2012
    Last edited: Nov 17, 2012

    macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    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');
    });
    
     

Share This Page