草庐IT

jquery - 滚动可见时 colgroup 上的 CSS 背景颜色

coder 2023-08-12 原文

所以我有一个页面可能包含也可能不包含一个或多个大而复杂的表格。使用 JQuery，我将鼠标悬停在表格上时向 tr 和 colgroup 添加背景颜色。

问题是当我有多个表格时，页面大于视口(viewport)(滚动条可见)，并且它不会影响第一个表格。我真的不知道如何解释它，只需全屏运行下面的代码片段，您就会看到。此外，这似乎不会发生在 IE 中。

$("table").delegate('td','mouseover mouseleave', function(e) {
  var $table = $(this).closest('table');
  if (e.type == 'mouseover') {
    $(this).parent().addClass("hover");
    $table.children("colgroup").children("col").eq($(this).index()).addClass("hover");
  } else {
    $(this).parent().removeClass("hover");
    $table.children("colgroup").children("col").eq($(this).index()).removeClass("hover");
  };
});
.hover {
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="margin: 60px;" cellpadding="10" cellspacing="0">
  <colgroup>
    <col></col>
    <col></col>
    <col></col>
    <col></col>
    <col></col>
  </colgroup>
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
      <th>col5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1a</td>
      <td>2a</td>
      <td>3a</td>
      <td>4a</td>
      <td>5a</td>
    </tr>
    <tr>
      <td>1b</td>
      <td>2b</td>
      <td>3b</td>
      <td>4b</td>
      <td>5b</td>
    </tr>
    <tr>
      <td>1c</td>
      <td>2c</td>
      <td>3c</td>
      <td>4c</td>
      <td>5c</td>
    </tr>
    <tr>
      <td>1d</td>
      <td>2d</td>
      <td>3d</td>
      <td>4d</td>
      <td>5d</td>
    </tr>
    <tr>
      <td>1e</td>
      <td>2e</td>
      <td>3e</td>
      <td>4e</td>
      <td>5e</td>
    </tr>
    <tr>
      <td>1f</td>
      <td>2f</td>
      <td>3f</td>
      <td>4f</td>
      <td>5f</td>
    </tr>
    <tr>
      <td>1g</td>
      <td>2g</td>
      <td>3g</td>
      <td>4g</td>
      <td>5g</td>
    </tr>
    <tr>
      <td>1h</td>
      <td>2h</td>
      <td>3h</td>
      <td>4h</td>
      <td>5h</td>
    </tr>
    <tr>
      <td>1i</td>
      <td>2i</td>
      <td>3i</td>
      <td>4i</td>
      <td>5i</td>
    </tr>
    <tr>
      <td>1j</td>
      <td>2j</td>
      <td>3j</td>
      <td>4j</td>
      <td>5j</td>
    </tr>
    <tr>
      <td>1k</td>
      <td>2k</td>
      <td>3k</td>
      <td>4k</td>
      <td>5k</td>
    </tr>
    <tr>
      <td>1l</td>
      <td>2l</td>
      <td>3l</td>
      <td>4l</td>
      <td>5l</td>
    </tr>
  </tbody>
</table>
<table style="margin: 60px;" cellpadding="10" cellspacing="0">
  <colgroup>
    <col></col>
    <col></col>
    <col></col>
    <col></col>
    <col></col>
  </colgroup>
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
      <th>col5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1a</td>
      <td>2a</td>
      <td>3a</td>
      <td>4a</td>
      <td>5a</td>
    </tr>
    <tr>
      <td>1b</td>
      <td>2b</td>
      <td>3b</td>
      <td>4b</td>
      <td>5b</td>
    </tr>
    <tr>
      <td>1c</td>
      <td>2c</td>
      <td>3c</td>
      <td>4c</td>
      <td>5c</td>
    </tr>
    <tr>
      <td>1d</td>
      <td>2d</td>
      <td>3d</td>
      <td>4d</td>
      <td>5d</td>
    </tr>
    <tr>
      <td>1e</td>
      <td>2e</td>
      <td>3e</td>
      <td>4e</td>
      <td>5e</td>
    </tr>
    <tr>
      <td>1f</td>
      <td>2f</td>
      <td>3f</td>
      <td>4f</td>
      <td>5f</td>
    </tr>
    <tr>
      <td>1g</td>
      <td>2g</td>
      <td>3g</td>
      <td>4g</td>
      <td>5g</td>
    </tr>
    <tr>
      <td>1h</td>
      <td>2h</td>
      <td>3h</td>
      <td>4h</td>
      <td>5h</td>
    </tr>
    <tr>
      <td>1i</td>
      <td>2i</td>
      <td>3i</td>
      <td>4i</td>
      <td>5i</td>
    </tr>
    <tr>
      <td>1j</td>
      <td>2j</td>
      <td>3j</td>
      <td>4j</td>
      <td>5j</td>
    </tr>
    <tr>
      <td>1k</td>
      <td>2k</td>
      <td>3k</td>
      <td>4k</td>
      <td>5k</td>
    </tr>
    <tr>
      <td>1l</td>
      <td>2l</td>
      <td>3l</td>
      <td>4l</td>
      <td>5l</td>
    </tr>
  </tbody>
</table>

这是怎么回事!？

最佳答案

我用 nth-child(n) 选择器做了一个变通方法，从而消除了对 col 和 colgroup 的需要。

$("table").delegate('td','mouseover mouseleave', function(e) {
    if (e.type == 'mouseover') {
        $(this).closest("table").find("tr td:nth-child(" + ($(this).index()+1) + ")").addClass("hover");
        $(this).parent().addClass("hover");
    } else {
        $(this).closest("table").find("tr td:nth-child(" + ($(this).index()+1) + ")").removeClass("hover");
        $(this).parent().removeClass("hover");
    };
});

关于jquery - 滚动可见时 colgroup 上的 CSS 背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32090233/

colgroupjquerygtlttdhtmlcss

有关jquery - 滚动可见时 colgroup 上的 CSS 背景颜色的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  5. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  6. ruby - 即时确定方法的可见性 - 2

    我正在编写一个方法，它将在一个类中定义一个实例方法；类似于attr_accessor:classFoocustom_method(:foo)end我通过将custom_method函数添加到Module模块并使用define_method定义方法来实现它，效果很好。但我无法弄清楚如何考虑类(class)的可见性属性。例如，在下面的类中classFoocustom_method(:foo)privatecustom_method(:bar)end第一个生成的方法(foo)必须是公共(public)的，第二个(bar)必须是私有(private)的。我怎么做？或者，如何找到调用我的cust

  7. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  8. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  9. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  10. ruby 诅咒颜色 - 2

    如何使用Ruby的默认Curses库获取颜色？所以像这样:puts"\e[0m\e[30;47mtest\e[0m"效果很好。在浅灰色背景上呈现漂亮的黑色。但是这个:#!/usr/bin/envrubyrequire'curses'Curses.noecho#donotshowtypedkeysCurses.init_screenCurses.stdscr.keypad(true)#enablearrowkeys(forpageup/down)Curses.stdscr.nodelay=1Curses.clearCurses.setpos(0,0)Curses.addstr"Hello

随机推荐