1. Welcome to the new MacRumors forums. See our announcement and read our FAQ

Set background colour by JavaScript

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

  1. macrumors newbie

    #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

    #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

    #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