Double-Click and Click Table Row using JQuery

Leave a comment

You may have a scenario where you have a table on your webpage and you would like to add an event through JavaScript to capture when a user double-clicks on a row.

Let’s say we have an HTML table, like below:

Code:

Now, let’s add click event to this.

Let’s say when a user clicks, we want to display the row number they are clicking on. Add a reference to jquery, and then add the code for the click event of the table row:

Clicking on NY produces:

Note the table is 0-index based, and there is also a row for the heading.

Now let’s change this to double click. We just need to change the click event to dblclick:

Clicking on TX produces:

 

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, BI, Web, Cloud and Data Science.

carldesouza.comLinkedIn Twitter | YouTube

 

Leave a Reply

Your email address will not be published. Required fields are marked *