Results 1 to 2 of 2

Thread: Navigate (highlight) a specified row in a table

  1. #1
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Navigate (highlight) a specified row in a table

    Hello,

    I need your help,

    How can I go about creating a specific function or building onto the existing code below that would allow me to go to (highlight) a specific row in a table. It is noted that the table headers should be always be exempt, therefore, start the row count at '0' after the table headers.

    Ie. function goToRow('3')

    and this function would highlight row 3

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #mstrTable {
         border: 1px solid black
    }
    #mstrTable td, th {
         border: 1px solid black
    }
    
    #mstrTable tr.normal td {
        color: black;
        background-color: white;
    }
    #mstrTable tr.highlighted td {
        color: white;
        background-color: gray;
    }
    </style>
    </head>
    <body>
      <table id="mstrTable">
         <thead>
          <tr>
            <th>File Number</th>
            <th>Date1</th>
            <th>Date2</th>
            <th>Status</th>
            <th>Num.</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>KABC</td>
            <td>09/12/2002</td>
            <td>09/12/2002</td>
            <td>Submitted</td>
            <td>0</td>
    
          </tr>
          <tr>
            <td>KCBS</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Approved</td>
            <td>1&nbsp;</td>
          </tr>
    
          <tr>
            <td>WFLA</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Submitted</td>
            <td>2</td>
          </tr>
          <tr>
            <td>WTSP</td>
            <td>09/15/2002</td>
            <td>09/15/2002</td>
            <td>In-Progress</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>
    
    <script type="text/javascript">
    
    var table = document.getElementById("mstrTable");
    var thead = table.getElementsByTagName("thead")[0];
    var tbody = table.getElementsByTagName("tbody")[0];
    
    tbody.onclick = function (e) {
       e = e || window.event;
       var td = e.target || e.srcElement; //assumes there are no other elements inside the td
       var row = td.parentNode;
        alert('Row is ' + (row.rowIndex - 1))
       if (this.lst&&this.lst!=row){
        this.lst.className='';
       }
       row.className = row.className==="highlighted" ? "" : "highlighted";
       this.lst=row;
    }
    
    thead.onclick = function (e) {
       e = e || window.event;
       var th = e.target || e.srcElement;  //assumes there are no other elements in the th
       alert(th.innerHTML);
    }
    </script>
    </body>

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #mstrTable {
         border: 1px solid black
    }
    #mstrTable td, th {
         border: 1px solid black
    }
    
    #mstrTable tr.normal td {
        color: black;
        background-color: white;
    }
    .highlighted {
        color: white;
        background-color: red;
    }
    </style>
    </head>
    <body>
      <table>
         <thead>
          <tr>
            <th>File Number</th>
            <th>Date1</th>
            <th>Date2</th>
            <th>Status</th>
            <th>Num.</th>
          </tr>
        </thead>
        <tbody id="mstrTable">
          <tr>
            <td>KABC</td>
            <td>09/12/2002</td>
            <td>09/12/2002</td>
            <td>Submitted</td>
            <td>0</td>
    
          </tr>
    
          <tr>
            <td>KCBS</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Approved</td>
            <td>1&nbsp;</td>
          </tr>
    
          <tr>
            <td>WFLA</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Submitted</td>
            <td>2</td>
          </tr>
          <tr>
            <td>WTSP</td>
            <td>09/15/2002</td>
            <td>09/15/2002</td>
            <td>In-Progress</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>
    <input type="button" name="" value="GoTo 0" onmouseup="GoTo('mstrTable',0);" />
    <input type="button" name="" value="GoTo 1" onmouseup="GoTo('mstrTable',1);" />
    <input type="button" name="" value="GoTo 2" onmouseup="GoTo('mstrTable',2);" />
    <input type="button" name="" value="GoTo 3" onmouseup="GoTo('mstrTable',3);" />
    
    <script type="text/javascript">
    
     function GoTo(id,nu){
      var obj=document.getElementById(id),trs=obj.getElementsByTagName('TR');;
      if (trs[nu]){
       if (GoTo.lst&&GoTo.lst!=trs[nu]){
        GoTo.lst.className='';
       }
       trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
       GoTo.lst=trs[nu];
      }
     }
    </script>
    </body>
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Highlight table cells via link
    By weejy in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-05-2009, 09:12 PM
  2. Highlight Table Columns
    By mburt in forum JavaScript
    Replies: 2
    Last Post: 07-24-2006, 02:37 PM
  3. Highlight Table Cells Script
    By TrueFangz in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-05-2006, 09:42 PM
  4. Highlight Table Row script using CSS
    By janjan32 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-17-2005, 04:54 PM
  5. Highlight Table Row script using CSS
    By janjan32 in forum JavaScript
    Replies: 1
    Last Post: 12-15-2005, 04:13 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •