Javascript DOM HTML TableRow rowIndex Property get from clicked row

Introduction

Click on different rows to alert their index position:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>/*from  w  ww  .j  a  v  a2 s .c  om*/
</head>
<body>
<p id="demo"></p>
<p>Click on each tr element to alert its index position in the table:</p>

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
  document.getElementById("demo").innerHTML = "Row index is: " + x.rowIndex;
}
</script>

</body>
</html>

The rowIndex property returns the position of a row in the rows collection of a table.




PreviousNext

Related