Tools and Technologies used in this article :

  1. HTML

  2. CSS

  3. jQuery

 

1. Include jQuery js

Include jQuery js (available in different CDN networks like Google CDN, Microsoft CDN, cdnjs.com etc.) inside <head> 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 1row 1, col 2row 1, col 3row 1, col 4row 1, col 5
row 2, col 1row 2, col 2row 2, col 3row 2, col 4row 2, col 5
row 3, col 1row 3, col 2row 3, col 3row 3, col 4row 3, col 5
row 4, col 1row 4, col 2row 4, col 3row 4, col 4row 4, col 5
row 5, col 1row 5, col 2row 5, col 3row 5, col 4row 5, col 5

 

Download SrcCodes

SrcCodes : demo.html

 

References