#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0

    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. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    [code=JavaScript]function goToRow(where)
    {
    document.getElementById("tr"+where+"").style.color="white";
    document.getElementById("tr"+where+"").style.backgroundColor="gray";
    }[/code]

    [code=HTML] <table id="mstrTable">
    <thead>
    <tr id="tr0">
    <th>File Number</th>
    <th>Date1</th>
    <th>Date2</th>
    <th>Status</th>
    <th>Num.</th>
    </tr>
    </thead>
    <tbody>
    <tr id="tr1">
    <td>KABC</td>
    <td>09/12/2002</td>
    <td>09/12/2002</td>
    <td>Submitted</td>
    <td>0</td>

    </tr>
    <tr id="tr2">
    <td>KCBS</td>
    <td>09/11/2002</td>
    <td>09/11/2002</td>
    <td>Approved</td>
    <td>1&nbsp;</td>
    </tr>

    <tr id="tr3">
    <td>WFLA</td>
    <td>09/11/2002</td>
    <td>09/11/2002</td>
    <td>Submitted</td>
    <td>2</td>
    </tr>
    <tr id="tr4">
    <td>WTSP</td>
    <td>09/15/2002</td>
    <td>09/15/2002</td>
    <td>In-Progress</td>
    <td>3</td>
    </tr>
    </tbody>
    </table>[/code]

IMN logo majestic logo threadwatch logo seochat tools logo