jquery table select and data retrieval

Question

I am using a html table that contains available times for scheduling. I want the user to be able to click on a time and from that be able to get the column header, which is the staff persons name, and the value of the cell - the time. I than want to change the contents of the cell to 'NA' and set the cell background to some color. I have been playing with this for awhile with no luck. I am new to javascripts and jquery. Any help would be greatly appreciated.

Answer 1

This should be a doable jquery task as long as you have the appropriate selectors. So you need a way to associate each time cell with a header cell. To do this i would add a user id to the cells in the header and the body:

<th class="header" id="1">Bob</th> 

<td class="selectable" id="10" name="1">10:00 AM</td>

Then for the jquery:

$("table#timetable tbody tr td").click(function(){
  var user_id = $(this).attr('name');
  var user_name = $("table#timetable thead tr th#" + user_id).html();
  var time = $(this).attr('id');
  $(this).html('N/A');
  $(this).css('background':'#990000');
  alert(user_id + ' ' + user_name + ' ' + time);
});