Finding the table row number of a clicked row only

jason_kelly · 01-13-2013, 12:32 AM

Hello,

I need the help of an expert here on this forum. The level of javascript is well beyond my capabilities and knowlege.

How can functionaity be added to the existing javascript coding below to find out as to what the row number is only clicked. The table headers should be exempt, and the dataset row number should start at ID number 0.

So for example, if the 2nd row of the table was clicked, an alert box would popup saying that "ID # is 1" and so fourth.

Much thanks and appreciation for all your help and support

Cheers

Jay

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">
(
  function( )
  {
      var trows = document.getElementById("mstrTable").rows;

      for ( var t = 1; t < trows.length; ++t )
      {
          trow = trows[t];
          trow.className = "normal";
          trow.onclick = highlightRow;
      }

      function highlightRow( )
      {
          for ( var t = 1; t < trows.length; ++t )
          {
              trow = trows[t];
              trow.className = ( trow == this && trow.className != "highlighted") ? "highlighted" : "normal";
          }
      }
  }
)();
</script>
</body>
</html>

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

Code:

      function highlightRow(e)
      {
            alert('Row is ' + this.rowIndex); // or (this.rowIndex - 1) if you prefer

The following would give you the cell index:

Code:

      function highlightRow(e)
      {
            var evt = e || window.event;
            var elem = evt.target || evt.srcElement;
            if (elem.nodeName == "TD") {
                alert('Cell is ' + elem.cellIndex);
            }