Javascript 列和行高亮显示不适用于类

我已经找到了一个表示例，它大概就是我想要的，但是它不会与页面上的其他表冲突，我需要它来影响类，而不是直接影响td和tr标记

这可能吗？如果是这样的话，下面的例子就是它应该是什么样子，而JSFIDLE就是它在转换为类之后所做的事情

工作示例：

$（'td'）。悬停（函数（）{
$（this.parents（'table'）.find（'col:eq（+$（this.index（）+'）））.toggleClass（'hover'）；
});
身体{
字体：16px/1.5 Helvetica，Arial，无衬线；
}
桌子{
宽度：80%；
保证金：20px自动；
边界塌陷：塌陷；
}
表th{
文本对齐：左对齐；
}
表tr，表col{
过渡：全部3秒；
}
表tbody tr：悬停{
背景色：rgba（0,140,203,0.2）；
}
表col.hover{
背景色：rgba（0,140,203,0.2）；
}
名称
年龄
生日
首选帽子款式
亚伯拉罕·林肯
204
二月十二日
烟囱
温斯顿·丘吉尔
139
11月30日
霍姆堡
罗伯格拉泽布鲁克
32
八月六日
扁帽

JSFIDLE不工作（更改后）：

hideTag（“左窗格”）；
$（'.data'）.hover（函数（）{
$（this）.parents（'.tble'）.find（'col:eq（'+$（this.index（）+'）））.toggleClass（'hover'）；
});
身体{
字体：16px/1.5 Helvetica，Arial，无衬线；
}
.tble{
宽度：80%；
保证金：20px自动；
边界塌陷：塌陷；
}
.tble.标题{
文本对齐：左对齐；
}
.tble.行，.tble列{
过渡：全部3秒；
}
.tble t车身。行：悬停{
背景色：rgba（0,140,203,0.2）；
}
.tble col.hover{
背景色：rgba（0,140,203,0.2）；
}
名称
年龄
生日
首选帽子款式
亚伯拉罕·林肯
204
二月十二日
烟囱
温斯顿·丘吉尔
139
11月30日
霍姆堡
罗伯格拉泽布鲁克
32
八月六日
扁帽

---

谢谢

将类添加到您的表中，例如

我的表

。并在js-

$（this.parents（'.my table'）

中使用它

//CSS新手文章如下：
// http://www.cssnewbie.com/simple-table-column-highlighting/
$（'td'）。悬停（函数（）{
$（this）.parents（'.my table'）.find（'col:eq（'+$（this.index（）+'）））.toggleClass（'hover'）；
});
正文{
字体：16px/1.5 Helvetica，Arial，无衬线；
}
桌子{
宽度：80%；
保证金：20px自动；
边界塌陷：塌陷；
}
表th{
文本对齐：左对齐；
}
表tr，表col{
过渡：全部3秒；
}
表tbody tr：悬停{
背景色：rgba（0,140,203,0.2）；
}
表col.hover{
背景色：rgba（0,140,203,0.2）；
}

名称
年龄
生日
首选帽子款式
亚伯拉罕·林肯
204
二月十二日
烟囱
温斯顿·丘吉尔
139
11月30日
霍姆堡
罗伯格拉泽布鲁克
32
八月六日
扁帽
我将添加一个类，以便您可以在所有要应用此影响的表上使用它，然后您可以按如下方式更改css和js，以仅针对具有此类的表：


$（'.hover table'）.find（'td'）.hover（函数（）{//仅查找悬停表中的tds
var currentTd=$（此值）；
currentTd.closest（'table'）.find（'col:eq（'+currentTd.index（）+'））.toggleClass（'hover'）；//如果表是嵌套的，我会使用closest
});
正文{
字体：16px/1.5 Helvetica，Arial，无衬线；
}
.悬停桌{
宽度：80%；
保证金：20px自动；
边界塌陷：塌陷；
}
.悬停桌{
文本对齐：左对齐；
}
.悬停台tr，
.悬停桌{
过渡：全部3秒；
}
.悬停台t车身tr：悬停，
.悬停表列悬停{
背景色：rgba（0、140、203、2）；
}

名称
年龄
生日
首选帽子款式
亚伯拉罕·林肯
204
二月十二日
烟囱
温斯顿·丘吉尔
139
11月30日
霍姆堡
罗伯格拉泽布鲁克
32
八月六日
扁帽
请检查代码片段


//CSS新手文章如下：
// http://www.cssnewbie.com/simple-table-column-highlighting/
$（'.myTd'）.hover（函数（）{
$（this）.parents（'.myTable'）.find（'.mycl:eq（'+$（this.index（）+'）））.toggleClass（'hover'）；
});
正文{
字体：16px/1.5 Helvetica，Arial，无衬线；
}
.我的桌子{
宽度：80%；
保证金：20px自动；
边界塌陷：塌陷；
}
.textlight{
文本对齐：左对齐；
}
myTr先生，
霉菌{
过渡：全部3秒；
}
.mytBody.myTr:悬停{
背景色：rgba（0、140、203、2）；
}
.麦考.哈弗{
背景色：rgba（0、140、203、2）；
}

名称
年龄
生日
首选帽子款式
亚伯拉罕·林肯
204
二月十二日
烟囱
温斯顿·丘吉尔
139
11月30日
霍姆堡
罗伯格拉泽布鲁克
32
八月六日
扁帽
但这不是我在第二个示例中所做的吗？（一个使用类）@HTMellis很有趣：）你忘了在小提琴中添加jQuery。并切换不正确的类
。切换类（'.hover'）而不是
.toggleClass（'hover'）。修正。很高兴我能帮上忙。我尝试了这个，它更好地满足了我的需要，事实上它并没有针对页面上的所有表，但突出显示在列中不起作用？嗨，皮特，我刚刚把它放到JSFIDLE中，列仍然不起作用，只有行？这很好。。我不知道为什么它以前对我不起作用。
<script>


$('td').hover(function() {
 $(this).parents('table').find('col:eq('+$(this).index()+')').toggleClass('hover'  );
});


</script>


<style type="text/css">

body {
   font: 16px/1.5 Helvetica, Arial, sans-serif;
}

table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
table th {
text-align: left;
}
table tr, table col {
transition: all .3s;
}
table tbody tr:hover {
background-color: rgba(0, 140, 203, 0.2);
}
table col.hover {
background-color: rgba(0, 140, 203, 0.2);
}



</style>




<div style="width:700px;">

<table>
<col />
<col />
<col />
<col />
<thead>
  <tr>
    <th>Name</th>
  <th>Age</th>
  <th>Birthdate</th>
  <th>Preferred Hat Style</th>
 </tr>
  </thead>
  <tbody>
  <tr>
  <td>Abraham Lincoln</td>
  <td>204</td>
  <td>February 12</td>
  <td>Stovepipe</td>
  </tr>
   <tr>
  <td>Winston Churchill</td>
  <td>139</td>
  <td>November 30</td>
  <td>Homburg</td>
  </tr>
  <tr>
  <td>Rob Glazebrook</td>
  <td>32</td>
  <td>August 6</td>
  <td>Flat Cap</td>
  </tr>
  </tbody>
 </table>

</div>

<script language="javascript">
hideTag('LeftPane');
</script>





<script>



$('.data').hover(function() {
$(this).parents('.tble').find('col:eq('+$(this).index()+')').toggleClass('hover');
});


</script>


<style type="text/css">

body {
font: 16px/1.5 Helvetica, Arial, sans-serif;
}

.tble {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
.tble .header {
text-align: left;
}
.tble .rows, .tble col {
transition: all .3s;
}
.tble tbody .rows:hover {
 background-color: rgba(0, 140, 203, 0.2);
}
.tble col.hover {
background-color: rgba(0, 140, 203, 0.2);
}



</style>




<div style="width:700px;">

<table class="tble">
 <col />
 <col />
 <col />
 <col />
  <thead>
   <tr class="rows">
  <th class="header">Name</th>
  <th class="header">Age</th>
  <th class="header">Birthdate</th>
  <th class="header">Preferred Hat Style</th>
  </tr>
 </thead>
 <tbody>
 <tr class="rows">
  <td class="data">Abraham Lincoln</td>
  <td class="data">204</td>
  <td class="data">February 12</td>
  <td class="data">Stovepipe</td>
 </tr>
 <tr class="rows">
   <td class="data">Winston Churchill</td>
  <td class="data">139</td>
  <td class="data">November 30</td>
  <td class="data">Homburg</td>
 </tr>
 <tr class="rows">
  <td class="data">Rob Glazebrook</td>
  <td class="data">32</td>
  <td class="data">August 6</td>
  <td class="data">Flat Cap</td>
  </tr>
 </tbody>
</table>
</div>