javascript - 如何使 jQuery 表格单元格 (td) 可单击以运行函数？

Question

我目前正在单击按钮时将按钮类传递给函数。 我想从使用按钮切换到使用 jQuery 表中的 td/单元格。 因此，当我单击单元格中的图像时，它会运行该函数，并将其类值传递给它。 表中有 4 行，每一行都会传递一个不同的类值。 一行中的每个单元格/td 将向函数传递完全相同的类值(目前)。

有人用按钮帮我解决了这个问题，现在我需要对单元格做同样的事情

例如设置一个按钮如下:

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

有人向我提供了一个关于如何使用表格执行此操作的示例，但我真的很难将其与我的代码相适应。

例子是:

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

我不需要按钮本身有值，因为我正在使用图像，但这不是问题。

下面是表格代码(在外部 jQuery 文件中创建)，目前是这样的:

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');

我试过以下方法:

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

但这会在页面加载时产生以下错误: 未捕获的语法错误:意外的标记 <

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

但是这些在页面加载时会出现以下错误: 未捕获的语法错误:参数列表后缺少 )

以我有限的知识，我曾尝试更改其他各种语法，但结果同样糟糕。 我卡住了。

Answer 1

试试这个

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

如果你的代码中有这样的东西，

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

将此更改为

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

#更新

你正在附加 td 像 append().append().append()......等等。所以你不要在每一行之后关闭它。