Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    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>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    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/

  • Users who have thanked vwphillips for this post:

    jason_kelly (01-19-2013)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    Thanks very much Phil.

    It works like a charm. But at row 0 it doesn't shade it in. Row 0 should start after the table headers. As I will be doing database work in the back end, it is important that the sequence be followed:

    HEADER
    ROW0
    ROW1
    ROW2
    ROW3
    ROW4

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by jason_kelly View Post
    Thanks very much Phil.

    It works like a charm. But at row 0 it doesn't shade it in. Row 0 should start after the table headers. As I will be doing database work in the back end, it is important that the sequence be followed:

    HEADER
    ROW0
    ROW1
    ROW2
    ROW3
    ROW4
    Just add one!
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    jason_kelly (01-19-2013)

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    Like this?

    nu = nu + 1

    Code:
    function GoTo(id,nu){
      var obj=document.getElementById(id),trs=obj.getElementsByTagName('TR');;
      nu = nu + 1
      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];
      }
     }


  •  

    Posting Permissions

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