Question

我正在尝试通过

在<tr>中选择<table>

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

现在我在桌子下面有一个滑块，想要用这些值做一些事情。

$( "#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> ID生成了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>

Jquery：如何将“可选”值转换为“滑块”功能？

1 个答案: