How To Get HTML Table Row And Cell Index Using Javascript
In This Javascript Tutorial we will See How To Get And Show Html Table Rows And Cells Index In Row Click Event Using JS And Netbeans Editor .
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Get HTML Table TR And TD Index</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
td:hover{background-color:#ddd;;cursor: pointer}
.selected{background-color: red;color: #fff;font-weight: bold}
</style>
</head>
<body>
<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>FN1</td>
<td>LN1</td>
<td>10</td>
</tr>
<tr>
<td>FN2</td>
<td>LN2</td>
<td>20</td>
</tr>
<tr>
<td>FN3</td>
<td class="selected">LN3</td>
<td>30</td>
</tr>
<tr>
<td>FN4</td>
<td>LN4</td>
<td>40</td>
</tr>
<tr>
<td>FN5</td>
<td>LN5</td>
<td>50</td>
</tr>
</table>
<script>
var table = document.getElementById("table"),rIndex,cIndex;
// table rows
for(var i = 1; i < table.rows.length; i++)
{
// row cells
for(var j = 0; j < table.rows[i].cells.length; j++)
{
table.rows[i].cells[j].onclick = function()
{
rIndex = this.parentElement.rowIndex;
cIndex = this.cellIndex+1;
console.log("Row : "+rIndex+" , Cell : "+cIndex);
};
}
}
</script>
</body>
</html>
<html>
<head>
<title>Get HTML Table TR And TD Index</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
td:hover{background-color:#ddd;;cursor: pointer}
.selected{background-color: red;color: #fff;font-weight: bold}
</style>
</head>
<body>
<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>FN1</td>
<td>LN1</td>
<td>10</td>
</tr>
<tr>
<td>FN2</td>
<td>LN2</td>
<td>20</td>
</tr>
<tr>
<td>FN3</td>
<td class="selected">LN3</td>
<td>30</td>
</tr>
<tr>
<td>FN4</td>
<td>LN4</td>
<td>40</td>
</tr>
<tr>
<td>FN5</td>
<td>LN5</td>
<td>50</td>
</tr>
</table>
<script>
var table = document.getElementById("table"),rIndex,cIndex;
// table rows
for(var i = 1; i < table.rows.length; i++)
{
// row cells
for(var j = 0; j < table.rows[i].cells.length; j++)
{
table.rows[i].cells[j].onclick = function()
{
rIndex = this.parentElement.rowIndex;
cIndex = this.cellIndex+1;
console.log("Row : "+rIndex+" , Cell : "+cIndex);
};
}
}
</script>
</body>
</html>
OUTPUT:
 |
| Row : 3 , Cell : 2 |
3 comments
commentshow to take those value outside the function
Replyuse the variables
ReplyIs it able to use arrow key instead of using mouse click to control the table?
Reply