javascript - 列和行突出显示不适用于类

Question

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

这可能吗？如果是这样的话，我下面的示例就是它应该是什么样子，而 jsfiddle 就是它在更改为类后所做的事情。

示例工作: http://codepen.io/rglazebrook/pen/nAzgy

<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>

jsfiddle 不工作(更改后): https://jsfiddle.net/pr007qy8/

<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>

谢谢

Answer 1

将类添加到您的表中，例如 my-table。并在 js 中使用它 - $(this).parents('.my-table').

// CSS Newbie article here:
// http://www.cssnewbie.com/simple-table-column-highlighting/

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-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>