时间戳

首页 > 解决方案 > 突出显示两个给定数据之间的值

jquery - 突出显示两个给定数据之间的值

问题描述

我有一个 php 生成的从 1 到 14 的比例表。我使用以下 jquery 代码突出显示表上的复选框表单给出的最小值和最大值。

样品表：

$("#checkAll").click(function() {
  $('input:checkbox').not(this).prop('checked', this.checked)
    .trigger("change");
});

$(".selector").on("change", function() {
  var parent = $(this).closest("form");

  $("#" + parent.data("checktable"))
    .find('[dbval="' + this.name + '"]')
    .toggleClass("highlight", $(this).is(":checked"));
  parent
    .find(".all")
    .prop(
      "checked",
      parent.find(".selector:checked").length === parent.find(".selector").length
    );
});

$(".all").on("change", function() {
  $(this).closest("form").find(".selector")
    .prop("checked", $(this).is(":checked"))
    .trigger("change");
});

$(".all:checked").each(function() {
  $(this).closest("form").find(".selector").prop("checked", true).trigger("change");
});

$(".selector").trigger("change");
table.tbA {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

table.tbA td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
  text-align: center;
}

table.tbA th {
  background-color: #104E8B;
  color: #FFF;
  font-weight: bold;
}

.highlight {
  background: #9ac99d;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table class='tbA' id='tb32'>
  <tr>
    <td dbval='14'>14</td>
  </tr>
  <tr>
    <td dbval='13'>13</td>
  </tr>
  <tr>
    <td dbval='12'>12</td>
  </tr>
  <tr>
    <td dbval='11'>11</td>
  </tr>
  <tr>
    <td dbval='10'>10</td>
  </tr>
  <tr>
    <td dbval='9'>9</td>
  </tr>
  <tr>
    <td dbval='8'>8</td>
  </tr>
  <tr>
    <td dbval='7'>7</td>
  </tr>
  <tr>
    <td dbval='6'>6</td>
  </tr>
  <tr>
    <td dbval='5'>5</td>
  </tr>
  <tr>
    <td dbval='4'>4</td>
  </tr>
  <tr>
    <td dbval='3'>3</td>
  </tr>
  <tr>
    <td dbval='2'>2</td>
  </tr>
  <tr>
    <td dbval='1'>1</td>
  </tr>
</table>
<label>
        <input type="checkbox" name="CheckAll" id="checkAll" class="all"> All </label>

<form id='form32' data-checktable='tb32' name='form32' method='post' action=' '>
  <label>
            <input type='checkbox' checked='checked' name='SelectAll' class='all'>All</label>
  <label>
            <input type='checkbox' class='selector' name='4'>4</label>
  <label>
            <input type='checkbox' class='selector' name='6'>6</label>
</form>
<form id='form31' data-checktable='tb31' name='form31' method='post' action=' '>
  <label>
            <input type='checkbox' checked='checked' name='SelectAll' class='all'>All</label>
  <label>
            <input type='checkbox' class='selector' name='3'>3</label>
  <label>
            <input type='checkbox' class='selector' name='12'>12</label>
</form>

通常我主要有两个值（最小值和最大值），但有时恰好有一个值（最小值或最大值）要突出显示，或者根本没有值（没有突出显示）。我不仅需要突出显示最小值和最大值，还需要突出显示最小值和最大值之间的所有值。

例如，如果 (min,max) 为 (2,8)，2,3,4,5,6,7, and 8则应突出显示。我怎样才能得到这个结果？

标签： jquery

解决方案

没有 avalue=而是name='3'在复选框上使用类型的东西很奇怪，但我会处理。

为了获得一个范围，您需要最小值和最大值，然后选择那些等于或介于它们之间的值。如果只选中一项，则为最小值和最大值。如果一个组中有三个复选框（此处不存在，但可能），则相同的逻辑有效。

所以基本上归结为选择目标表中与范围匹配的值。

注意：此代码非常冗长，因此您可以看到正在发生的事情并且可以稍微压缩一下。

由于各种原因，我会使用data-myvalue类型属性而不是dbval=在表格和name=复选框中，但这不是我的工作。

if (!!t.length) {防止表不存在的情况（如第二组复选框）

$("#checkAll").on('change', function() {
  $('input[type=checkbox].all')
    .not(this).prop('checked', this.checked)
    .trigger("change");
});

$(".selector").on("change", function() {
  var myForm = $(this).closest("form");
  let t = $("#" + myForm.data("checktable"));
  if (!!t.length) {
    let tList = t.find('[dbval]');
    tList.toggleClass("highlight", false);
    let checks = myForm.find("input[type=checkbox].selector");
    let checkedList = checks.filter(':checked');
    myForm.find('.all')
      .prop('checked', (checks.length === checkedList.length));
    let selectedValues = [];
    checkedList
      .each(function(index, element) {
        selectedValues.push($(element).attr("name") * 1); //why not value??
      });
    let max = Math.max(...selectedValues);
    let min = Math.min(...selectedValues);
    let listThings = tList.filter(function(index) {
      let v = $(this).attr("dbval") * 1;
      return (v <= max && v >= min);
    }).toggleClass("highlight", !!checkedList.length);
  }
});


$("input[type=checkbox].all").on("change", function() {
    $(this).closest("form")
      .find(".selector")
      .prop("checked", $(this).is(":checked"))
      .trigger("change");
  })
  .trigger("change")
  .parent().css('border', 'solid 1px blue'); // just to show
table.tbA {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

table.tbA td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
  text-align: center;
}

table.tbA th {
  background-color: #104E8B;
  color: #FFF;
  font-weight: bold;
}

.highlight {
  background: #9ac99d;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table class='tbA' id='tb32'>
  <tr>
    <td dbval='14'>14</td>
  </tr>
  <tr>
    <td dbval='13'>13</td>
  </tr>
  <tr>
    <td dbval='12'>12</td>
  </tr>
  <tr>
    <td dbval='11'>11</td>
  </tr>
  <tr>
    <td dbval='10'>10</td>
  </tr>
  <tr>
    <td dbval='9'>9</td>
  </tr>
  <tr>
    <td dbval='8'>8</td>
  </tr>
  <tr>
    <td dbval='7'>7</td>
  </tr>
  <tr>
    <td dbval='6'>6</td>
  </tr>
  <tr>
    <td dbval='5'>5</td>
  </tr>
  <tr>
    <td dbval='4'>4</td>
  </tr>
  <tr>
    <td dbval='3'>3</td>
  </tr>
  <tr>
    <td dbval='2'>2</td>
  </tr>
  <tr>
    <td dbval='1'>1</td>
  </tr>
</table>
<label><input type="checkbox" name="CheckAll" id="checkAll" class="all"> All </label>

<form id='form32' data-checktable='tb32' name='form32' method='post' action=' '>
  <label><input type='checkbox' checked='checked' name='SelectAll' class='all'>All</label><label><input type='checkbox' class='selector' name='4'>4</label><label><input type='checkbox' class='selector' name='6'>6</label></form>
<form id='form31' data-checktable='tb31' name='form31' method='post' action=' '><label><input type='checkbox' checked='checked' name='SelectAll' class='all'>All</label><label><input type='checkbox' class='selector' name='3'>3</label><label><input type='checkbox' class='selector' name='12'>12</label></form>

推荐阅读