JQuery“任意行” 拾取器

Question

我正在寻找 JQuery 的通用“行选择器”。

我们都见过很酷的“选择器”工具，例如日期选择器、颜色选择器、时间选择器等，您在文本框中单击，就会出现一个小日历、调色板、时钟或其他东西。 您选择一些内容（例如日期），然后文本框中会填充一个值。

我真的需要一个通用的“行选择器”，您可以在其中使用一些数据行（例如时区列表）填充某些内容（表格、div 等）。 这将链接到一个文本字段，并在用户单击该字段时弹出。

他们将单击一行（例如时区），时区 ID 将被传递回字段。

有人知道有什么作用吗？

谢谢！

Answer 1

我不知道完全通用，但你当然可以在 jQuery 中相当轻松地实现行选择器。

<script type="text/javascript"> $(function() {
        $('table#data_table tr').click(function() {
              alert($(this).find('td.id').html());
          }); }); 
</script>


<table border="0" id="data_table">
<tr>
<td class="id">45</td><td>GMT</td>
</tr>
<tr>
<td class="id">47</td><td>CST</td>
</tr>
</table>

这会向每一行添加一个点击，找到该行中的标记 ID，然后您可以使用它执行某些操作。 显然，您需要将其定位到数据表并根据内容进行过滤。 然后可以使用 JQuery 将单击结果填充到目标字段中。 然后，您可以提出一些约定，其中所有数据表都以相同的方式工作，这将允许您将其概括为应用程序的通用选择器。

Answer 2

在这种情况下，最好使用事件委托。 因此，将事件处理程序放在表本身上，这避免了必须为每一行绑定一个处理程序，如果您有很多行，那么这是相当昂贵的。 然后，您可以使用 event.target 查询哪个元素负责该事件并从那里开始。

更多信息此处

例如

$('#someTable').click(function(e) {
  var target = $(e.target);

});

Answer 3

这并不完全是您要求的，但它可能正是您寻找的：支持时区的 Any+Time(TM) Datepicker/Timepicker AJAX 小部件 可以在时间选择器中显示时区列表，方便用户选择适当的时区。 它也很容易定制，并且比大多数其他使用下拉菜单或滑块的时间选择器允许更快的选择。 我希望这有帮助！

Answer 4

我知道我晚了一年，而且我可能在这里遗漏了一些东西，但是带有 size 属性的 select 元素有什么问题吗？

<select name="test" size="5">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

这将显示所有 5 个选项，并允许用户选择一个。 如果只是以标准形式使用，它也绝对没有 Javascript 依赖性，而且还可以很好地处理典型的 Javascript 事件，并且似乎也能产生您想要的确切外观 - 更不用说，一如既往，您可以使用 CSS 来设置样式随你喜欢。

当标准 HTML 可以工作时，我会说：使用标准 HTML。