Onclick event & JQuery – Table row

Now that most modern websites use the JQuery library, we should use the correct way of handling click events;

This article takes the example of a click triggered onto a row inside a table to highlight the row and load some details inside a field.


You may check out the demo to get a glance at the details.


At first you should download the library if you want to test your code, here I use jquery-2.1.1.js

which isn’t compatible with IE 8 and older.


Now you can add the following line to your page in order to load the library :

<script src="jquery-2.1.1.js" language="javascript"></script>

We also define a few simple styles to see things right :

table {
        border     : 1px solid gray;
	width      : 50%;
	text-align : center;

table#sourcetable tbody tr {
    background-color : #ffccff;

table#sourcetable tbody  tr {
    cursor : pointer;


You will see that when over a row, it will show a hand, this is achieved by the cursor : pointer parameter to each row.

Following is the code of our html page :

<br /><h3>The source table</h3>

<table id="sourcetable">

            <td>Name 1</td>
            <td>url 1</td>
            <td>Country 1</td>
            <td>Item 1</td>
            <td>Name 2</td>
            <td>url 2</td>
            <td>Country 2</td>
            <td>Item 2</td>
            <td>Name 3</td>
            <td>url 3</td>
            <td>Country 3</td>
            <td>Item 3</td>
            <td>Name 4</td>
            <td>url 4</td>
            <td>Country 4</td>
            <td>Item 4</td>
            <td>Name 5</td>
            <td>url 5</td>
            <td>Country 5</td>
            <td>Item 5</td>

<h3>The field :</h3>

The field to fill in with second item of a row : <input type="text" id="fillname" value="" />

We’ve filled the table with some items and we choose the second column as the item to be transfered to the field under the table.

Now the code within the head tags :

<br />// global var to track the selected row :
var pickedup;

$(document).ready(function() {
    $( "#sourcetable tbody tr" ).on( "click", function( event ) {

          // get back to where it was before if it was selected :
          if (pickedup != null) {
              pickedup.css( "background-color", "#ffccff" );

          $( this ).css( "background-color", "red" );

          pickedup = $( this );

Each time a row is clicked, the detail of the second row will appear inside the field and the row will be highlighted. If you click onto a different row, the background color will revert back to its original color. We keep track of the current clicked row using the pickedup var.

You may use the source of the demo page for all the source code.

I hope you enjoyed the short tutorial, there will be more very soon.

Downloads and informations :




2 responses to “Onclick event & JQuery – Table row”

  1. Mantu Singh says:

    Thanks , Its helpful

  2. John says:

    This works fine but is there a way to output into a php variable instead of an html input field ?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Want more information?

Related links will be displayed within articles for you to pick up another good spot to get more details about software development, deployment & monitoring.

Stay tuned by following us on Youtube.

%d bloggers like this: