Skip to content

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

JQuery

 

 

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>
Copy

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 );
    });
});
Copy

Download SrcCodes

demo.html

Trackbacks

No Trackbacks

Comments

Display comments as Linear | Threaded

No comments

Add Comment

Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.
To leave a comment you must approve it via e-mail, which will be sent to your address after submission.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

Form options

Submitted comments will be subject to moderation before being displayed.