Navigate (highlight) a specified row in a table

jason_kelly · 01-18-2013, 08:37 PM

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>

vwphillips · 01-18-2013, 09:33 PM

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>

jason_kelly · 01-19-2013, 12:18 AM

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

AndrewGSW · 01-19-2013, 12:52 AM

Quote:

Originally Posted by jason_kelly

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!

jason_kelly · 01-19-2013, 04:53 AM

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];
  }
 }