突出显示不与类一起使用的列和行

时间：2016-07-28 09:35:17

标签： javascript html css

我找到了一个表格示例，大致与我的目标相同，但是它不会与页面上的其他表格冲突，我需要它来影响类而不是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>

由于

3 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
// 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');
});
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我会添加一个类，以便您可以在要应用此效果的所有表上使用它，然后您可以按如下方式更改css和js以仅定位具有此类的表：

$('.hover-table').find('td').hover(function() { // only find tds in hover tables
  var currentTd = $(this);
  currentTd.closest('table').find('col:eq(' + currentTd.index() + ')').toggleClass('hover'); // I would use closest in case your table is nested
});
body {
  font: 16px/1.5 Helvetica, Arial, sans-serif;
}
.hover-table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
}
.hover-table th {
  text-align: left;
}
.hover-table tr,
.hover-table col {
  transition: all .3s;
}
.hover-table tbody tr:hover,
.hover-table col.hover {
  background-color: rgba(0, 140, 203, .2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="hover-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>

答案 2 :(得分：0)

请查看代码段。

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

$('.myTd').hover(function() {
  $(this).parents('.myTable').find('.myCol:eq(' + $(this).index() + ')').toggleClass('hover');
});
＆＃13; 
body {
  font: 16px/1.5 Helvetica, Arial, sans-serif;
}
.myTable {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
}
.textLeft {
  text-align: left;
}
.myTr,
.myCol {
  transition: all .3s;
}
.mytBody .myTr:hover {
  background-color: rgba(0, 140, 203, .2);
}
.myCol.hover {
  background-color: rgba(0, 140, 203, .2);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="myTable">
  <col class="myCol" />
  <col class="myCol" />
  <col class="myCol" />
  <col class="myCol" />
  <thead>
    <tr>
      <th class="textLeft">Name</th>
      <th class="textLeft">Age</th>
      <th class="textLeft">Birthdate</th>
      <th class="textLeft">Preferred Hat Style</th>
    </tr>
  </thead>
  <tbody class="mytBody">
    <tr class="myTr">
      <td class="myTd">Abraham Lincoln</td>
      <td class="myTd">204</td>
      <td class="myTd">February 12</td>
      <td class="myTd">Stovepipe</td>
    </tr>
    <tr class="myTr">
      <td class="myTd">Winston Churchill</td>
      <td class="myTd">139</td>
      <td class="myTd">November 30</td>
      <td class="myTd">Homburg</td>
    </tr>
    <tr class="myTr">
      <td class="myTd">Rob Glazebrook</td>
      <td class="myTd">32</td>
      <td class="myTd">August 6</td>
      <td class="myTd">Flat Cap</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题