javascript - Jquery 条件高亮显示

Question

在这个例子中https://jsfiddle.net/erv79u0w/ ，当单击“全选”时，所有相应的值都会在表格中突出显示。

是否可以仅突出显示表中同一行中同时存在的值。例如，当使用“全选”选择第一个值(A、B、X、Y)时，只有同时出现在同一行中的值才应该突出显示。在这种情况下，它只是表格中的第二行。所以只有第二行的值应该突出显示。

The cells not in the same row shouldn't be highlighted like in the image below.

$('.selector').each(function() {
  $(this).on('click', check);
});

$('.all').each(function() {
  $(this).on('click', all);
});

function all(event) {
  if ($(this).is(':checked')) {
    $("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
  } else {
    $("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
  }

  //$('.selector').prop("checked", this.name === "SelectAll");

  check(event);
}

function check(event) {
  var checked = $(".selector:checked").map(function() {
    return this.name
  }).get()
  $('td').removeClass("highlight").filter(function() {
    return $.inArray($(this).text(), checked) >= 0
  }).addClass("highlight")
  if ($(this).is(".selector"))
    $('.all').not(this).prop("checked", false)
}

.highlight {
  background: #9ac99d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
  <div id="sidebar1">

      <div id="container">
        <div id="sidebar1">
          <h3>Parameters:</h3>
          <form id="form1" name="form1" method="post" action="">
            <label>
                <input type="checkbox" name="SelectAll" class="all" />Select All</label>
            <label>
                <input type="checkbox" name="A" class="selector" />A</label>
            <label>
                <input type="checkbox" name="B" class="selector" />B</label>
            <label>
                <input type="checkbox" name="X" class="selector" />X</label>
            <label>
                <input type="checkbox" name="Y" class="selector" />Y</label>
          </form>
          <form id="form2" name="form2" method="post" action="">
            <label>
                <input type="checkbox" name="SelectAll" class="all" />Select All</label>
            <label>
                <input type="checkbox" name="K" class="selector" />K</label>
            <label>
                <input type="checkbox" name="J" class="selector" />J</label>
            <label>
                <input type="checkbox" name="M" class="selector" />M</label>
            <label>
                <input type="checkbox" name="T" class="selector" />T</label>
          </form>
        </div>
      
      <div id="mainContent">
        <h3 align="right">&nbsp;</h3>
        <div>
          <table width="200" border="1">
            <tr>
              <td>A</td>
              <td>&nbsp;</td>
              <td>M</td>
              <td>&nbsp;</td>
              <td>K</td>
              <td>J</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>B</td>
              <td>A</td>
              <td>&nbsp;</td>
              <td>Y</td>
              <td>X</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>Y</td>
              <td>&nbsp;</td>
              <td>J</td>
              <td>T</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td> X</td>
              <td>&nbsp;</td>
              <td>X</td>
              <td>&nbsp;</td>
              <td>Y</td>
            </tr>
            <tr>
              <td>K</td>
              <td>Q</td>
              <td>&nbsp;</td>
              <td>T</td>
              <td>&nbsp;</td>
              <td>Y</td>
            </tr>
            <tr>
              <td>M</td>
              <td>&nbsp;</td>
              <td>T</td>
              <td>K</td>
              <td>J</td>
              <td>Z</td>
            </tr>
          </table>
        </div>
      </div>

Answer 1

Array.prototype.compare = function(testArr) {
  if (this.length != testArr.length) return false;
  for (var i = 0; i < testArr.length; i++) {
    if (this[i].compare) { //To test values in nested arrays
      if (!this[i].compare(testArr[i])) return false;
    } else if (this[i] !== testArr[i]) return false;
  }
  return true;
}
$(document).on('click', '.all', function() {
  $('#mainContent table tr td').removeClass('highlight');
  if (!$(this).is(':checked')) {
    $(this).closest('form').find('input.selector').prop('checked', false);
  }
  $('input[name=SelectAll]').each(function() {
    if ($(this).is(':checked')) {
      $(this).closest('form').find('input.selector').prop('checked', true);
      processAllClick($(this));
    } else {
      processIndividualClick($(this));
    }
  });
});
$(document).on('click', '.selector', function() {
  $('#mainContent table tr td').removeClass('highlight');
  if (!$(this).is(':checked')) {
    $(this).closest('form').find('input.all').prop('checked', false);
  }
  $('input[name=SelectAll]').each(function() {
    if ($(this).is(':checked')) {
      processAllClick($(this));
    } else {
      processIndividualClick($(this));
    }
  });
});

function processIndividualClick(input) {
  $(input).closest('form').find('input.selector:checked').each(function() {
    $('td:contains(' + $(this).attr('name') + ')').addClass('highlight');
  });
}

function processAllClick(input) {
  var elems = [];
  $(input).closest('form').find('input.selector:checked').each(function() {
    elems.push($(this).attr('name'));
  });
  $('#mainContent table tr').each(function() {
    var child = [];
    $(this).find('td').each(function() {
      if ($.inArray($(this).text(), elems) != -1)
        child.push($(this).text());
    });
    if (elems.sort().compare(child.sort())) {
      for (var i = 0; i < child.length; i++) {
        $(this).find('td').each(function() {
          if ($(this).text() == child[i]) {
            $(this).addClass('highlight');
          }
        });
      }
    }
  });
}

.highlight {
  background: #9ac99d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="sidebar1">

    <div id="container">
      <div id="sidebar1">
        <h3>Parameters:</h3>
        <form id="form1" name="form1" method="post" action="">
          <label>
                <input type="checkbox" name="SelectAll" class="all" />Select All</label>
          <label>
                <input type="checkbox" name="A" class="selector" />A</label>
          <label>
                <input type="checkbox" name="B" class="selector" />B</label>
          <label>
                <input type="checkbox" name="X" class="selector" />X</label>
          <label>
                <input type="checkbox" name="Y" class="selector" />Y</label>
        </form>
        <form id="form2" name="form2" method="post" action="">
          <label>
                <input type="checkbox" name="SelectAll" class="all" />Select All</label>
          <label>
                <input type="checkbox" name="K" class="selector" />K</label>
          <label>
                <input type="checkbox" name="J" class="selector" />J</label>
          <label>
                <input type="checkbox" name="M" class="selector" />M</label>
          <label>
                <input type="checkbox" name="T" class="selector" />T</label>
        </form>
      </div>

      <div id="mainContent">
        <h3 align="right">&nbsp;</h3>
        <div>
          <table width="200" border="1">
            <tr>
              <td>A</td>
              <td>&nbsp;</td>
              <td>M</td>
              <td>&nbsp;</td>
              <td>K</td>
              <td>J</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>B</td>
              <td>A</td>
              <td>&nbsp;</td>
              <td>Y</td>
              <td>X</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>Y</td>
              <td>&nbsp;</td>
              <td>J</td>
              <td>T</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td> X</td>
              <td>&nbsp;</td>
              <td>X</td>
              <td>&nbsp;</td>
              <td>Y</td>
            </tr>
            <tr>
              <td>K</td>
              <td>Q</td>
              <td>&nbsp;</td>
              <td>T</td>
              <td>&nbsp;</td>
              <td>Y</td>
            </tr>
            <tr>
              <td>M</td>
              <td>&nbsp;</td>
              <td>T</td>
              <td>K</td>
              <td>J</td>
              <td>Z</td>
            </tr>
          </table>
        </div>
      </div>

所有的点击事件都在这里处理