Question

我有一个从1到14的php生成的比例表。我用下面的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应突出显示。我怎么能得到这个结果？

Answer 1

没有value=，而是在复选框上使用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>

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

1 个答案: