Question

I am building scheduling software. I am using a number of tables to display times/dates, etc.

In one particular table there are cells with id’s that list the date and employee id number.

I am trying to setup a trading shift system. When the cell is click an ajax function is performed.

Here is an example cell:

<td id="tblcell-2013_03_13-id_3" class="displayShift">$data placed here</td>

Jquery code:

$(document).ready(function () {

  // I can't do this because each id is different
  $("td#tblcell").click(function () {
    alert('it works!');

  });

  // I can't do this because there other other td elements on the same page in other tables
  $("td").click(function () {
    alert('it works!');
  });

});

How do I set up a function that is activated when a specific cell is clicked that also passess var data to the function in a script that has other td table elements that can’t be referenced in this function?

thanks

Answer 1

You can use the td[id^="tblcell"] selector to select all TDs with their ID starting with tblcell

$('td[id^="tblcell"]').click(function() {
    // ... do stuff ...
});

Demo for attribute-value-starts-with selector: http://jsfiddle.net/ARkxD/