突出显示多个表格中的多行

【问题标题】：Highlight multiple rows in several tables突出显示多个表格中的多行
【发布时间】：2017-06-26 22:38:49
【问题描述】：

我有一个包含多行信息的页面，由多个用户创建。我正在寻找一种在鼠标悬停时突出显示所有用户行的方法。

这个“Highlight multiple items on hover's condition”几乎解决了我的问题，但由于我的问题中的类或 id 是来自数据库的动态，并且包含来自数据库的标识符并且每次都是唯一的。我一直无法申请。

示例代码：https://jsfiddle.net/3cehoh78/

<table class="testtable">
      <tr id="uniqueIDthatcantbechanged">
        <td class="cellclass">Line 1a</td>
        <td class="cellclass">Sam</td>
        <td class="cellclass">data</td>
      </tr>
      <tr id="uniqueIDthatcantbechanged">
        <td class="cellclass">Line 2a</td>
        <td class="cellclass">Frodo</td>
        <td class="cellclass">data</td>
      </tr>
      <tr id="uniqueIDthatcantbechanged">
        <td class="cellclass">Line 3a</td>
        <td class="cellclass">Sam</td>
        <td class="cellclass">data</td>
      </tr>
      <tr id="uniqueIDthatcantbechanged">
        <td class="cellclass">Line 4a</td>
        <td class="cellclass">Legoman</td>
        <td class="cellclass">data</td>
      </tr>
    </table>
    <br>
    <br>
    <table class="testtable">
      <tr id="uniqueIDthatcantbechanged">
        <td class="cellclass">Line 1b</td>
        <td class="cellclass">Sauron</td>
        <td class="cellclass">data</td>
      </tr>
      <tr id="uniqueIDthatcantbechanged">
        <td class="cellclass">Line 2b</td>
        <td class="cellclass">Sam</td>
        <td class="cellclass">data</td>
      </tr>
      <tr id="uniqueIDthatcantbechanged">
        <td class="cellclass">Line 3b</td>
        <td class="cellclass">Sam</td>
        <td class="cellclass">data</td>
      </tr>
      <tr id="uniqueIDthatcantbechanged">
        <td class="cellclass">Line 4b</td>
        <td class="cellclass">Legoman</td>
        <td class="cellclass">data</td>
      </tr>
      <tr id="uniqueIDthatcantbechanged">
        <td class="cellclass">Line 5b</td>
        <td class="cellclass">Frodo</td>
        <td class="cellclass">data</td>
      </tr>
    </table>

在此示例中，我希望鼠标悬停在其中一个上时突出显示所有带有“Sam”的行，因此第 1a、3a、2b、3b 行。 我正在考虑在生成表时向所有 Sam 行添加一个类（Sam 具有唯一的用户 ID），但是我如何更改影响鼠标悬停时所有行（而不仅仅是一个）的 css。 请注意，我不能为所有唯一的用户 ID 预先添加 css 类，这只是一个示例。

【问题讨论】：

  • 我假设用户 ID 是已知的（即传递给用户的页面）。我假设页面（即 JavaScript）可以跟踪用户添加/添加的行。然后应该可以将 用户 ID 用作用户添加的 al* 行上的一个类，或者简单地在它们上添加一个通用类（指示所有权）。
  • 允许使用jQuery吗？
  • 最简单的事情就是将它们用作数据属性....只要吐出一个 data-name="foo" 就可以轻松选择元素。似乎很奇怪，您不能更改吐出表格的代码来稍微改变它。没有它，您要么需要做一个昂贵的 contains() 选择器，要么在页面加载时循环遍历表格并设置属性
  • @domdom，这将是一个呈现给所有用户的视图，所以你以谁的身份登录并不重要。
  • @kevinb。 jQuery 很好。

标签： javascript css


【解决方案1】：

这里有一个使用 JQuery https://jsfiddle.net/3cehoh78/5的解决方案

$(document).ready(function() {


    $( "tr" ).hover(function() {
     var search = $(this).find("td:eq(1)").text();

   $( ".highlight" ).removeClass("highlight");


     $("tr:contains('"+search+"')").addClass("highlight");
  }); /* END HOVER */

}); // end document ready

【讨论】：

  • 很好，这似乎在做这项工作，我有点担心它可能会很重，因为页面中有很多数据。我明天试试看。如果我在行中添加一些独特的值会更容易吗？例如来自数据库的用户 ID？
  • 性能方面最好的办法是给你的 tr 一个用户 ID 的类。类，因为 Sam 可以有多个行，并且 ID 只允许一次。然后，您只需在悬停时突出显示该类的所有行，而不是通过 DOM 进行搜索。
  • jsfiddle.net/3cehoh78/7 示例目前适用于 SAM
  • 谢谢，第二个解决方案就像我想要的那样工作:-)（第一个突出显示页面上许多其他内容的方式：p）
【解决方案2】：

不使用 jQuery 和 co 的简单解决方案：https://jsfiddle.net/3cehoh78/3/

var rows = [].slice.call(document.querySelectorAll('.testtable tr'));

rows.forEach(function(row) {
  row.addEventListener('mouseover', function() {
    resetHighlighting();
    var name = row.querySelector('td:nth-child(2)').textContent;
    rows.forEach(function(r) {
      if (r.querySelector('td:nth-child(2)').textContent === name) {
        r.classList.add('highlighted');
      }
    });
  });
});

function resetHighlighting() {
  rows.forEach(function(row) {
    row.classList.remove('highlighted');
  });
}

【讨论】：

  • 很好，这似乎在做这项工作，我有点担心它可能会很重，因为页面中有很多数据。我明天试试看。如果我在行中添加一些独特的值会更容易吗？例如来自数据库的用户 ID？
  • 为什么不将其标记为已接受的答案 ;-) 当然，向属于同一组的行添加唯一标记会更快。您可以为正确的子列保留选择器，并使用 textContent，这在某些情况下可能会很昂贵。
【解决方案3】：

这是使用 vanilla-JavaScript 的另一种方式。

var tds = document.querySelectorAll('td');

var highlight = function () {
    // take this person's name from the 2nd cell
    var name = this.parentNode.children[1].innerHTML;
    // highlight cells with same name
    tds.forEach(function (td) {
        var tr = td.parentNode;
        // compare other's person name with this person name
        // highlight if there is a match
        tr.classList.toggle('highlight', tr.children[1].innerHTML === name)
    });
}
// attach an event listener to all cells
tds.forEach(function (td) {
    td.onmouseover = highlight;
});

Demo

【讨论】：

  • 很好，这似乎在做这项工作，我有点担心它可能会很重，因为页面中有很多数据。我明天试试看。如果我在行中添加一些独特的值会更容易吗？例如来自数据库的用户 ID？
  • @ThisIsMe 如果您要为每个tr 使用唯一值，那么它不能存储在id 属性中，因为它们应该是唯一的（出现一次）。我通常将数据库 ID 存储在 HTML5 data-attributes 例如data-id。这与我的示例（第一行）中所做的缓存trs 和 alex3683 的组合可能会提高性能。但是话又说回来，有时干净而简短的方式就像汤姆的方式更好。
  • @ThisIsMe 这个Demo 2 将是一个修订版，如果您要使用带有 ID 的数据属性。
  • 谢谢，这正是我一直在寻找的，但是我遇到了“forEach”的问题，并出现错误消息“foreach 不是函数”。所以我选择了汤姆的第二个解决方案。
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode