How to Make a jQuery Table Cell(td) clickable to Run a Function?

Question

I am currently passing the button class to a function when the button is clicked. I want to switch from using buttons to using the td/cells in a jQuery table. So when I click on the image in the cell, it runs the function, passing its class value to it. There are 4 rows in the table, each row will pass a different class value. Each cell/td in a row will pass exactly the same class value to the function (for now).

Someone helped me with this using buttons and now I need to do the same with the cells

For example, one button is set as below:

<input type="button" class="clear" style="width:110px;" onclick="return SetShift(this.className)" value="Clear" />

I was provided with an example on how to do this with a table but I am really struggling to fit this in with my code.

The example is:

<td class="clear" onclick="setShift(this.className)">Clear</td>

I do not need the button to have a value itself as I am using images, but this is not the problem.

Below is the table code (which is created in an external jQuery file), as it currently is:

var $table = $('<table>');
$table.append()

//tbody
var $tbody = $table.append('<tbody />').children('tbody');

// add row
$tbody.append('<tr />').children('tr:last')
.append("<th>Clear</th>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>");

// add another row
$tbody.append('<tr />').children('tr:last')
.append("<th>Earlies</th>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>");

// add another row
$tbody.append('<tr />').children('tr:last')
.append("<th>Lates</th>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>");

// add another row
$tbody.append('<tr />').children('tr:last')
.append("<th>Double</th>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>")
.append("<td></td>");

// add table to dom
$table.appendTo('#dynamicTable');

I have tried the below:

.append(<td class="clear" onclick="setShift(this.className)"></td>);

But this gives the following error on page load: Uncaught SyntaxError: Unexpected token <

.append("<td class="clear" onclick="setShift(this.className)"></td>");
.append(""<td class="clear" onclick="setShift(this.className)"></td>"");

But these gives the following error on page load: Uncaught SyntaxError: missing ) after argument list

And with my limited knowledge I have tried changing other various syntax with equally bad results. I am stuck.

Answer 1

Try this

.append('<td class="clear" onclick="setShift(this.className)"></td>')

and if there is anything like this on your code,

.append("<td class="clear" onclick="setShift(this.className)"></td>");
.append(""<td class="clear" onclick="setShift(this.className)"></td>"");

change this to

.append('<td class="clear" onclick="setShift(this.className)"></td>')
.append('<td class="clear" onclick="setShift(this.className)"></td>')

#update

You are appending the td like append().append().append() ......etc. So you don't close that after each line.