Finding the table row number of a clicked row

Question

How can functionaity be added to the existing javascript coding below to find out as to what row number is clicked. The table headers should be exempt, and the dataset will 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"

<!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>

If you are using JQuery, check http://stackoverflow.com/questions/7554218/html-table-clicked-rows-number — Sunny, Jan 12 '13 at 16:56

Sunny · Answer 1 · 2013-01-12T17:15:34.440

2

Checkout rowIndex property here. It starts from 0.

edited Jan 12 '13 at 17:15

answered Jan 12 '13 at 17:02

Sunny

4,765
5
37
72

bumerang · Accepted Answer · 2013-01-12T17:21:26.210

Just put data-row-no attribut to every <tr>. Then from JavaScript call trow.getAttribute('data-row-no') to get current row.

...
 <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 data-row-no="0"> 
    <td>KABC</td>
    <td>09/12/2002</td>
    <td>09/12/2002</td>
    <td>Submitted</td>
    <td>0</td>

  </tr>
  <tr data-row-no="1"> 
    <td>KCBS</td>
    <td>09/11/2002</td>
    <td>09/11/2002</td>
    <td>Approved</td>
    <td>1&nbsp;</td>
  </tr>

  <tr data-row-no="2"> 
    <td>WFLA</td>
    <td>09/11/2002</td>
    <td>09/11/2002</td>
    <td>Submitted</td>
    <td>2</td>
  </tr>
  <tr data-row-no="3"> 
    <td>WTSP</td>
    <td>09/15/2002</td>
    <td>09/15/2002</td>
    <td>In-Progress</td>
    <td>3</td>
  </tr>


...
(
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";
          alert(trow.getAttribute('data-row-no'));
      }
  }
}
)();

Finding the table row number of a clicked row

2 Answers2