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.

click_row_table_event

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

http://prog.linkstraffic.net/jquery/table_row_event.html

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">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Url</th>
            <th>Country</th>
            <th>Item</th>                       
        </tr>
    </thead>

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


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

          $("#fillname").val($(this).find("td").eq(1).html());
          $( 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 :

http://jquery.com/

http://api.jquery.com/

 

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: