This example shows how to determine click position (row and column number) on click of a table cell using jQuery.
Tools and Technologies used in this article :
1. Include jQuery js
Include jQuery js (available in different CDN networks like Google CDN, Microsoft CDN, cdnjs.com etc.) inside
tag of your html page.<html>
<head>
<title>Determine Click Position on click of a table cell</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
</head>
<body>
<!-- body here -->
</body>
</html>
2. Prepare dummy HTML table
Prepare a dummy HTML table for testing purpose. 'result' Div will show the corresponding row and column number when a particular cell of 'myTable' table is clicked.
<div id="result"> </div>
<table id="myTable" border="1" style="border-collapse: collapse;" cellpadding="8">
<!--1st ROW-->
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
<td>row 1, col 3</td>
<td>row 1, col 4</td>
<td>row 1, col 5</td>
</tr>
<!--2nd ROW-->
<tr>
<td>row 2, col 1</td>
<td>row 2, col 2</td>
<td>row 2, col 3</td>
<td>row 2, col 4</td>
<td>row 2, col 5</td>
</tr>
<!--3rd ROW-->
<tr>
<td>row 3, col 1</td>
<td>row 3, col 2</td>
<td>row 3, col 3</td>
<td>row 3, col 4</td>
<td>row 3, col 5</td>
</tr>
<!--4th ROW-->
<tr>
<td>row 4, col 1</td>
<td>row 4, col 2</td>
<td>row 4, col 3</td>
<td>row 4, col 4</td>
<td>row 4, col 5</td>
</tr>
<!--5th ROW-->
<tr>
<td>row 5, col 1</td>
<td>row 5, col 2</td>
<td>row 5, col 3</td>
<td>row 5, col 4</td>
<td>row 5, col 5</td>
</tr>
</table>
3. Javascript Code
Add following Javascript code to determine the click position on click of a table cell.
$(document).ready(function(){
$("#myTable td").click(function() {
var column_num = parseInt( $(this).index() ) + 1;
var row_num = parseInt( $(this).parent().index() )+1;
$("#result").html( "Row_num =" + row_num + " , Rolumn_num ="+ column_num );
});
});
4. Full HTML Code
File : demo.html
<!doctype html>
<html>
<head>
<title>Determine Click Position on click of a table cell</title>
<!--CSS -->
<style>
td{
cursor:pointer;
background: -moz-linear-gradient(top, #ffffff, #D1E3E9);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#D1E3E9));
text-align:center;
}
td:hover{
background: -moz-linear-gradient(top, #249ee4, #057cc0);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#249ee4), to(#057cc0));
}
td:active
{
background: -moz-linear-gradient(top, #057cc0, #249ee4);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#057cc0), to(#249ee4));
}
#result{
font-weight:bold;
font-size:16pt;
}
</style>
<!--JAVASCRIPT -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script>
$(document).ready(function(){
$("#myTable td").click(function() {
var column_num = parseInt( $(this).index() ) + 1;
var row_num = parseInt( $(this).parent().index() )+1;
$("#result").html( "Row_num =" + row_num + " , Rolumn_num ="+ column_num );
});
});
</script>
</head>
<body>
<div id="result"> </div>
<table id="myTable" border="1" style="border-collapse: collapse;" cellpadding="8">
<!--1st ROW-->
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
<td>row 1, col 3</td>
<td>row 1, col 4</td>
<td>row 1, col 5</td>
</tr>
<!--2nd ROW-->
<tr>
<td>row 2, col 1</td>
<td>row 2, col 2</td>
<td>row 2, col 3</td>
<td>row 2, col 4</td>
<td>row 2, col 5</td>
</tr>
<!--3rd ROW-->
<tr>
<td>row 3, col 1</td>
<td>row 3, col 2</td>
<td>row 3, col 3</td>
<td>row 3, col 4</td>
<td>row 3, col 5</td>
</tr>
<!--4th ROW-->
<tr>
<td>row 4, col 1</td>
<td>row 4, col 2</td>
<td>row 4, col 3</td>
<td>row 4, col 4</td>
<td>row 4, col 5</td>
</tr>
<!--5th ROW-->
<tr>
<td>row 5, col 1</td>
<td>row 5, col 2</td>
<td>row 5, col 3</td>
<td>row 5, col 4</td>
<td>row 5, col 5</td>
</tr>
</table>
</body>
</html>
5. Live Demo
| row 1, col 1 | row 1, col 2 | row 1, col 3 | row 1, col 4 | row 1, col 5 |
| row 2, col 1 | row 2, col 2 | row 2, col 3 | row 2, col 4 | row 2, col 5 |
| row 3, col 1 | row 3, col 2 | row 3, col 3 | row 3, col 4 | row 3, col 5 |
| row 4, col 1 | row 4, col 2 | row 4, col 3 | row 4, col 4 | row 4, col 5 |
| row 5, col 1 | row 5, col 2 | row 5, col 3 | row 5, col 4 | row 5, col 5 |
Comments