Javascript 使用jQuery遍历表并设置其样式

我正在使用jQuery做某种评估表单。它本质上是一个HTML表格形式的网格或矩阵。我想对2x5个表格单元格应用单击（以及稍后的悬停）事件。单击表格单元格时，我会按列收集所有元素。我单击的列和左侧的列（我称之为选择栏）我要应用类，右侧的列（这是nar，是“无栏”的缩写）我要从中删除类

我想我已经弄明白了选择的过程，尽管它可以改进。只是即使在我做的.hasClass（）测试失败时，也会应用类

一些代码，如果你愿意的话。这是我的静态HTML模板：

<tr class="boss">
    <td class="question" rowspan="2">Executing for results</td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-head click-head"></td>
    <td class="radio"></td>
    <td class="radio"></td>
    <td class="radio"></td>
</tr>
<tr class="employee">
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail"></td>
    <td class="radio answer-head"></td>
    <td class="radio"></td>
</tr>

问题是这个脚本给了我一些奇怪的bug。即，单击第二行最后一个表格单元格将导致：

<tr class="boss">
    <td class="question" rowspan="2">Executing for results</td>
    <td class="radio answer-tail click-tail click-head"></td>
    <td class="radio answer-head click-head"></td>
    <td class="radio click-head"></td>
    <td class="radio click-head"></td>
    <td class="radio click-head"></td>
</tr>
<tr class="employee">
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-head click-head"></td>
    <td class="radio click"></td>
</tr>

为结果而执行

第一行的最后一个单元格被赋予了错误的类。在我的bar.each（）中，我检查当前单元格是否有class.answer head，如果没有，则应使用。单击。这被某种方式覆盖，但仍给出了“单击头”

为什么?

---

编辑：这里有一个小问题：（依赖于WebKit：Chrome或Safari…

您提供的代码不完整，请使用jquery sortable。。或同型。。别再浪费生命去编写自己的代码了。@r0m4n：好的，对不起。这是一把更新过的小提琴：@ppumkin:我会看看Sortable。@ppumkin:我真的不知道该怎么做，也不会帮我。

<tr class="boss">
    <td class="question" rowspan="2">Executing for results</td>
    <td class="radio answer-tail click-tail click-head"></td>
    <td class="radio answer-head click-head"></td>
    <td class="radio click-head"></td>
    <td class="radio click-head"></td>
    <td class="radio click-head"></td>
</tr>
<tr class="employee">
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-head click-head"></td>
    <td class="radio click"></td>
</tr>