Max Max - 2 years ago 72
CSS Question

Conditional Highlighting with Jquery

In this example https://jsfiddle.net/erv79u0w/, when "Select All" is clicked, all the respective values are highlighted on the table.

Is it possible to highlight ONLY the values existing together in the same row on the table. As an example, the first values (A,B,X,Y) when Selected with "Select All", only the values that appear in the same row together should be highlighted. And in this case, it is only the second row on the table. So only the values on the second row should be highlighted.


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


enter image description here



$('.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 Source

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');
  processAllClick();
});

function processAllClick() {
  $('input[name=SelectAll]').each(function() {
    if ($(this).is(':checked')) {
      $(this).closest('form').find('input.selector').prop('checked', true);
    } else {
      $(this).closest('form').find('input.selector').prop('checked', false);
      return;
    }

    var elems = [];
    $(this).closest('form').find('input.selector').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>

All click event is handled here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download