Imediava's Blog

Just another WordPress.com site

Monthly Archives: July 2011

Show additional information about an html table row with JQuery

In webpages HTML tables are often used to show information about a list of items. Sometimes we need to allow the user to get additional information about an item by clicking on its row. In this post, I am going to show with a really simple example how to create this interesting effect with JQuery, AJAX, and HTML5 data attributes.

The flow of information for this sample it’s similar to any AJAX request:

Flow of information for an AJAX request

  • When the user clicks on a row it fires a JavaScript event that is captured by a JavaScript function (1).
  • Our function request the additional information about our item to a webserver (2)
  • Finally the function receives the response and modifies the HTML with it (3).

Next, I am going to get into the details for every step of the process in our example:

1. Capturing click event

First, we use JQuery to add to every row in our table and event listener in charge of handling the click event.

$(document).ready(function() {

	$('tr').click(function () {

		});

	});

});

Then we need a way to identify the exact row that has fired the click event. For this task I have used HTML5 data attributes. For a really good explanation on HTML5 data attributes there’s a great explanation available at Jhon Resig’s blog. For a shorter explanation let’s say that this attributes allows us to add custom attributes to an HTML element. Every row in the HTML or our sample has a data-code attribute:

<tr data-code="smith">

				

		    <td>John</td>

	

		    <td>Smith</td>



		    <td>john-smith@doesnt-exist.com</td>

		

		    <td>555-045678</td>

				

</tr>

Thanks to that we can get the item code with JQuery, doing:

$(document).ready(function() {

	$('tr').click(function () {

	  	var codigo = $(this).data("code")
		});

	});

});

2. Requesting user’s information with AJAX

Now to get the item’s additional information we can use its code, and use it to make a request on our webserver. To make the request we use JQuery’s ajax function:

$(document).ready(function() {

	$('tr').click(function () {

	  var codigo = $(this).data("code")

	  $.ajax({

		  url: codigo + ".html",

		  dataType: "text",

		  cache: false,

		  success: function(html){

		  }

		});

	});

});

In the code we can see that the request uses the item’s code to ask the webserver explicitly about the clicked item.

3. Updating the webpage with the additional information

Finally when we receive the response from the webserver, we use it to show it in our panel for additional information with JQuery’s html function.

$(document).ready(function() {

	$('tr').click(function () {

	  var codigo = $(this).data("code")

	  $.ajax({

		  url: codigo + ".html",

		  dataType: "text",

		  cache: false,

		  success: function(html){

		    $("#add-info-panel").html(html);

		  }

		});

	});

});

PS: For the full code of our example just click here.

Selecting a row from a table with JQuery

In this post, I am going to describe how to set up an html table so that the user can select one and only one row from that table. The selection only means that the row selected is going to be highlighted.

First we need to establish with CSS the colour the highlighted row is going to have. In this case we chose red:

tbody tr.hilite td {
    background: none repeat scroll 0 0 red;
}

The last snippet means that all table cells (td) whose parent is a row that belongs to the class hilite will have a red background colour.

Now using JQuery we link the click event for every table row in the page to a function that removes the class hilite for every row first, this way we make sure that there is only going to be one cell highlighted at the same time. Then we add the class to the row that has actually been click.

$(document).ready(function() {
   $('tr').click(function () {
      $(this).siblings('tr').removeClass('hilite');
      $(this).toggleClass('hilite');
   });
}); 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: