Question

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

这＆＃34; Highlight multiple items on hover's condition＆＃34;几乎解决了我的问题，但由于我的问题中的类或id是来自数据库的动态，并且将包含来自DB的标识符并且每次都是唯一的。我无法应用它。

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

＆＃13;

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

＆＃13;

在这个例子中，我希望所有行都包含＆＃34; Sam＆＃34;鼠标悬停在其中一个上突出显示，所以行1a，3a，2b，3b。我在考虑在生成表时为所有Sam行添加一个类（Sam有一个唯一的用户ID），但是如何更改影响鼠标悬停时所有行的css（而不仅仅是一个）。请注意，我无法为所有唯一的用户ID预先添加css类，这只是一个示例。

Answer 1

简单的解决方案，不使用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');
  });
}

Answer 2

这是一个使用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

Answer 3

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

jQuery(function () {
    //
   // add span and hide
   //
    jQuery('<span class="preis_ab">ab </span>').insertBefore('.WA_price2').hide();
    jQuery('#attribute149').on('change', function(e) {
         //
         // toggle visibility if the index of selected option is 1
         //
        jQuery('#WA_price .preis_ab').toggle(this.selectedIndex == 1);
        
        //
        // a different approach is: check if option with
        // value 28 is selected
        //
        //jQuery('#WA_price .preis_ab').toggle(
        //   jQuery('#attribute149 option[value=28]').is(':selected'));
    });
});

Demo

突出显示多个表中的多行

3 个答案: