Web Design: Dynamic Tables with Clickable Content

My preferred method for building tables with dynamic content (search results, etc) is to do so in PHP.
The problem there is, how do I make it so the user can interact with my table data?

I do this using class and id within the appropriate tr/td tags, concatenating a row identifier to the id. This gives me the information I need to identify the rowset that the user wants to address.

When the user clicks on one of these elements, I use a class selector in JQUERY to capture the event, strip the known value, using string.replace from the element id, leaving me with the row identifier. This allows me to pass on the appropriate reference to whatever query I need to run.

Here’s an example:

php script

//do some query stuff and set up your table here
//Your db table contains the columns idx (your PK index), name, comment
$output = '<table>';
$output .= '<tr><td colspan="3">Click the name to do stuff!</td></tr>';
foreach($query as $row) {

 $output .= '<tr><td class="clickme" id="cm_'.$row['idx'].'">'.$row['name'].'</td><td>'.$row['comment'].'</td></tr>';
//                                        ^^^^^^^^^^^^^^^^    there's the concatenation bit                                      
$output .= '</table>';
echo $output


JQuery function

$(".clickme").click(function(e) {

var tid = this.id;
var rid = tid.replace('cm_','');   //this leaves you with only the contents of the idx column of the database row for the clicked line

alert("Congrats! You clicked row index " + rid);


I’m certain that you would do something more useful than pop up an alert box (unless your users are easy to amuse and not all that productive)
Sometime soon I’ll post some comprehensive examples, such as how to bring up text boxes to edit the data (hint: I use visibility alot in that one!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s