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

<?php
//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!

PHP: Create HTML Table Row from DB Quick and Easy

One of the things that I find myself doing is building tables to display data from a database query.

My preferred method of doing this is using a JQUERY Post call to a PHP script.

I won’t bore you with the PDO connection strings and database query and cut right to the chase:

<?php
/* do all your db connection stuff and query here */
/* The presumption here is that your $query will return the fields ID,Name and Some Interesting Data, IN THAT ORDER */

$output = '<table>';
$output .= '<tr><th>ID</th><th>Name</th><th>Some Interesting Data</th></tr>';
foreach($query as $row) {   

    $output .= '<tr><td>'.implode('</td><td>',$row).'</td></tr>';      //pretty slick eh?  No concatenating a bunch of cells

}

$output .= '</table>';

echo $output;
unset($dbh);
exit;
?>

Welcome!

Hi There!

Welcome to another of the hundreds, upon thousands of programming blogs in the universe!

My intention here is to provide code snippets in various languages and platforms that I find useful.   I have a talent for explaining things in ways that I think are easy to understand.

If you’re brand new to programming and looking to learn from scratch,  this probably isn’t the place for you.   Once you have a basic understanding, you’re welcome to peruse snippets and pick up some tips.

If you’re looking through my stuff and see something that’s wrong, or that there’s a better way,  post it!

I’m a self-taught programmer.  I don’t know everything (don’t tell anyone I said that!),  and there are probably better ways to do some of the things that I demonstrate here.

My posts will hopefully give you the basics of what I’m trying to show you.

One of the things that I find very annoying about some tutorials and sample code,  is that the author gives you a step by step on setting up a working example…often without sufficient explanation for you to take the bits you need to bend them to your purpose.

I will try to avoid that.

Now…I probably won’t post frequently…but hopefully what I post will be helpful to someone.