javascript - Jquery:如何将 "selectable"值获取到 "Slider"函数中？

Question

我正在尝试选择 <tr>在<table>通过

$(".selectable>tbody").selectable({
    filter: 'tr',
    cancel: 'a',
    selected: function(event, ui) {
      var SELECTED =  $(ui.selected).attr('id');
    }
    });

现在我在 table 下面有一个 slider ，想用这些值做一些事情。

$( "#slider" ).slider({
  value:0,
  min: 0,
  max: 500,
  step: 5,
  slide: function( event, ui ) {
    var table = document.getElementById(SELECTED);
    var cells = table.getElementsByTagName('td');
    <!-- Do something with cell[i] -->

这里是 HTML 代码:

<table class="selectable">
 <tr id="php-generated-uuid"><td>Value X</td><td>Value Y</td></tr>
 <tr id="php-generated-uuid"><td>Value X</td><td>Value Y</td></tr>
</table>
<div id="slider"></div>
<p>Output 1: <input readonly  id="view-slider-change"></input></p>
<p>Output 2: <input readonly  id="view-new-value"></input></p>

如果我手动输入 SELECTED 参数，它就会起作用。但是我怎样才能自动访问该值呢？ PS:<tr> ids 已生成 php 值。

Answer 1

您应该在函数范围之外有一个 SELECTED 变量。

我添加了一些 CSS 来显示表中行的选择和突出显示。

您现在需要知道如何处理所选单元格。

$(function() {
  var $table = $('.selectable').first();
  var SELECTED;

  $(".selectable>tbody").selectable({
    filter: 'tr',
    cancel: 'a',
    selected: function(event, ui) {
      SELECTED = $(ui.selected).attr('id');
    }
  });

  $("#slider").slider({
    value: 0,
    min: 0,
    max: 500,
    step: 5,
    width: '50%',
    slide: function(event, ui) {
      if (SELECTED && SELECTED.length > 0) {
        var $cells = $table.find('td');
        console.log($cells.length); // 4
      }
    }
  });
});

table.selectable {
  border-collapse: collapse; margin-bottom: 1em;
}
.selectable,
.selectable td,
.selectable th {
  border: thin solid black; text-align: center;
}
.selectable tbody tr:hover {
  cursor: pointer;
}
.selectable .ui-selecting {
  background: #FECA40;
}
.selectable .ui-selected {
  background: #F39814; color: white;
}
label {
  display: block; margin-bottom: 0.25em;
}
.ui-slider {
  display: inline-block; width: 33%; margin-left: 0.5em;
}
.as-console-wrapper {
  max-height: 20% !important;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<table class="selectable">
  <thead>
    <tr>
      <th>X Value</th>
      <th>Y Value</th>
    </tr>
  </thead>
  <tbody>
    <tr id="php-generated-uuid">
      <td>10 <!-- Value X --></td>
      <td>10 <!-- Value Y --></td>
    </tr>
    <tr id="php-generated-uuid">
      <td>50 <!-- Value X --></td>
      <td>50 <!-- Value Y --></td>
    </tr>
  </tbody>
</table>
<label>Slider: <div id="slider"></div></label>
<label>Output 1: <input readonly id="view-slider-change" /></label>
<label>Output 2: <input readonly id="view-new-value" /></label>