Determine Click Position (Row and Column Number) on click of a table cell

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>
&lt;!--2nd ROW--&gt;
&lt;tr&gt;
    &lt;td&gt;row 2, col 1&lt;/td&gt;
    &lt;td&gt;row 2, col 2&lt;/td&gt;
    &lt;td&gt;row 2, col 3&lt;/td&gt;
    &lt;td&gt;row 2, col 4&lt;/td&gt;
    &lt;td&gt;row 2, col 5&lt;/td&gt;
&lt;/tr&gt;

&lt;!--3rd ROW--&gt;
&lt;tr&gt;
    &lt;td&gt;row 3, col 1&lt;/td&gt;
    &lt;td&gt;row 3, col 2&lt;/td&gt;
    &lt;td&gt;row 3, col 3&lt;/td&gt;
    &lt;td&gt;row 3, col 4&lt;/td&gt;
    &lt;td&gt;row 3, col 5&lt;/td&gt;
&lt;/tr&gt;

&lt;!--4th ROW--&gt;
&lt;tr&gt;
    &lt;td&gt;row 4, col 1&lt;/td&gt;
    &lt;td&gt;row 4, col 2&lt;/td&gt;
    &lt;td&gt;row 4, col 3&lt;/td&gt;
    &lt;td&gt;row 4, col 4&lt;/td&gt;
    &lt;td&gt;row 4, col 5&lt;/td&gt;
&lt;/tr&gt;

&lt;!--5th ROW--&gt;
&lt;tr&gt;
    &lt;td&gt;row 5, col 1&lt;/td&gt;
    &lt;td&gt;row 5, col 2&lt;/td&gt;
    &lt;td&gt;row 5, col 3&lt;/td&gt;
    &lt;td&gt;row 5, col 4&lt;/td&gt;
    &lt;td&gt;row 5, col 5&lt;/td&gt;
&lt;/tr&gt;
</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;    

    $(&quot;#result&quot;).html( &quot;Row_num =&quot; + row_num + &quot;  ,  Rolumn_num =&quot;+ 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;    

        $(&quot;#result&quot;).html( &quot;Row_num =&quot; + row_num + &quot;  ,  Rolumn_num =&quot;+ 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>
    &lt;!--2nd ROW--&gt;
    &lt;tr&gt;
        &lt;td&gt;row 2, col 1&lt;/td&gt;
        &lt;td&gt;row 2, col 2&lt;/td&gt;
        &lt;td&gt;row 2, col 3&lt;/td&gt;
        &lt;td&gt;row 2, col 4&lt;/td&gt;
        &lt;td&gt;row 2, col 5&lt;/td&gt;
    &lt;/tr&gt;

    &lt;!--3rd ROW--&gt;
    &lt;tr&gt;
        &lt;td&gt;row 3, col 1&lt;/td&gt;
        &lt;td&gt;row 3, col 2&lt;/td&gt;
        &lt;td&gt;row 3, col 3&lt;/td&gt;
        &lt;td&gt;row 3, col 4&lt;/td&gt;
        &lt;td&gt;row 3, col 5&lt;/td&gt;
    &lt;/tr&gt;

    &lt;!--4th ROW--&gt;
    &lt;tr&gt;
        &lt;td&gt;row 4, col 1&lt;/td&gt;
        &lt;td&gt;row 4, col 2&lt;/td&gt;
        &lt;td&gt;row 4, col 3&lt;/td&gt;
        &lt;td&gt;row 4, col 4&lt;/td&gt;
        &lt;td&gt;row 4, col 5&lt;/td&gt;
    &lt;/tr&gt;

    &lt;!--5th ROW--&gt;
    &lt;tr&gt;
        &lt;td&gt;row 5, col 1&lt;/td&gt;
        &lt;td&gt;row 5, col 2&lt;/td&gt;
        &lt;td&gt;row 5, col 3&lt;/td&gt;
        &lt;td&gt;row 5, col 4&lt;/td&gt;
        &lt;td&gt;row 5, col 5&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</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

Download SrcCodes

demo.html

References

jQuery API