How do I create a clickable grid of hours in a week, saving clicks to MySQL?

Just wondering if there is a system out there that will basically allow for the following :

Displaying a grid of hours in a week that a user can click on to select and reclick to deselect and when the form is submitte开发者_C百科d it will send the blocks off to MySQL to store.

Since I havent done this before Im not sure on the best course of action, intial thoughts were to load up a pixel.gif and use onclick to tally clicks but before I reinvent the wheel as a square I thought it best to ask questions first to save trouble later.

You could create a table where the checked td's have one class and the unchecked td's have another class, and all of them have a unique ID. Then set the onclick action for each of the two classes to send the id of the td as an argument to a javascript function that uses ajax to update the database and changes the class of the td to selected or unselected.

The html would look like:

<td id='19_09_2011_12am' class='unselected_td'/></td>
<td id='19_09_2011_12am' class='selected_td'/></td>

The css would look like:

.unselected_td{background-color:blue;}
.selected_td{background-color:yellow;}

And the javascript:

$('.unselected_td').click(function(){
   var cell = this.id;
  $.ajax({
   type:'post',
   url:'path/file.php',
   data:"cell="+cell+"&checked=1",
   success:function(){
      $(this).removeClass('unselected_td').addClass('selected_td');
   }
 });
});

And vice-versa for the selected ones, sending a 0 to the server instead. I'm not 100% sure about the syntax I used in the jquery, but the idea of this should work

I think the easiest way to achieve this would be to use buttons or checkboxes to represent the dates/hours selected. Checkboxes would be the simplest, since they could just be set to a value of '1', and only the selected checkboxes would show up as $_POST variables when you submit the form.

Buttons could have more style applied to them, but you would have to use some javascript code to toggle the value and style of the button when it's clicked. This is very easy to do in jQuery.