Question

我有一个HTML表格，我基本上将列拆分成3组。前2列带有css display：none;要隐藏它们，第3列是可见的。（第3列在片段中以黄色显示，使视觉上更容易理解）我的目标是当鼠标悬停在第3列中的任何td时，前2列出现。我的想法是使用

        $("td").hover(function(){
            $(this).prev().removeClass('hidetd');
        });

使前一列再次可见，但它只引用前一个td，所以这不起作用。

我可以使用jQuery中的任何内容来选择整个列而不仅仅是那个td吗？我已经做了很多在线搜索而没有任何运气。

在下面的代码片段中，我故意不包含.hidetd css，因为我认为在看到它们时会更容易理解。添加一个简单的

.hidetd{
display:none;

}

CSS部分中的

将使这些列消失。我也知道colspan =“3”将需要被删除，并且只有当它被鼠标悬停时才会被添加到列中。希望下面的代码片段很容易理解。

table,th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
        
}

.yellowbr {
  background-color:yellow;  
}

<table>
                <tr>
                    <th>Item #</th>
                    <th colspan='3'>100017</th>
                    <th colspan='3'>100018</th>
                    <th colspan='3'>100019</th>
                    <th colspan='3'>100020</th>
                </tr>
                <tr>
                    <th>Component</th>
                    <th colspan='3'><u>Potato chips</u></th>
                    <th colspan='3'><u>butterfingers</u></th>
                    <th colspan='3'><u>Flat Pretzels</u></th>
                    <th colspan='3'><u>Milk Chocolate</u></th>
                </tr>
                <tr>
                    <th>2016-01-03</th>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                </tr>
                <tr>
                    <th>2016-01-04</th>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                </tr>
                <tr>
                    <th>2016-01-05</th>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                </tr>
                <tr>
                    <th>2016-01-06</th>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                </tr>
                <tr>
                    <th>2016-01-07</th>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='hidetd'>0</td>
                    <td class='yellowbr'>0</td>
                </tr>
            </table>
        
        </div>

Answer 1

您可以使用prevAll()然后slice来获取前两个项目，例如：

$('.yellowbr').hover(function() {
  $(this).prevAll().slice(0, 2).toggleClass('light')
})

$('.yellowbr').hover(function() {
  $(this).prevAll().slice(0, 2).toggleClass('light')
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
.yellowbr {
  background-color: yellow;
}
.light {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Item #</th>
    <th colspan='3'>100017</th>
    <th colspan='3'>100018</th>
    <th colspan='3'>100019</th>
    <th colspan='3'>100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th colspan='3'><u>Potato chips</u>
    </th>
    <th colspan='3'><u>butterfingers</u>
    </th>
    <th colspan='3'><u>Flat Pretzels</u>
    </th>
    <th colspan='3'><u>Milk Chocolate</u>
    </th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
</table>

</div>

要选择整个列，您可以使用index作为参考：

$('.yellowbr').hover(function() {
  var sel = $(this).index();
  $('tr').each(function(){
    $('td',this).slice(sel-3,sel-1).toggleClass('light')
  })
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
.yellowbr {
  background-color: yellow;
}
.light {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Item #</th>
    <th colspan='3'>100017</th>
    <th colspan='3'>100018</th>
    <th colspan='3'>100019</th>
    <th colspan='3'>100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th colspan='3'><u>Potato chips</u>
    </th>
    <th colspan='3'><u>butterfingers</u>
    </th>
    <th colspan='3'><u>Flat Pretzels</u>
    </th>
    <th colspan='3'><u>Milk Chocolate</u>
    </th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
</table>

</div>

使用.prev（）显示上一列

1 个答案: