JQuery“任何行”选择器

时间:2008-10-14 00:59:09

标签: jquery picker

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

我们都看过很酷的“Picker”工具,比如日期选择器,颜色选择器,时间选择器等,您可以在文本框中单击,然后会出现一些日历或颜色的味道或时钟。您选择某些内容(如日期),然后使用值填充文本框。

我真的需要一个通用的“行选择器”,你可以用一些数据行(比如一个时区列表)填充一些东西(一个表,一个div等)。这将链接到文本字段,并在用户单击字段时弹出。

他们会点击一行(比如一个时区),时区ID会被传回现场。

有人知道有什么事吗?

谢谢!

4 个答案:

答案 0 :(得分:4)

我不知道完全通用,虽然你可以在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将点击结果填充到目标字段中。然后,您可以提出一些约定,其中所有数据表的工作方式相同,这样您就可以将其概括为应用程序的通用选择器。

答案 1 :(得分:2)

在这种情况下,最好使用事件委派。因此,将事件处理程序放在表本身上,这样就可以避免必须为每一行绑定一个处理程序,如果你有好几行就会非常昂贵。然后,您可以使用event.target查询哪个元素负责该事件并从那里开始。

更多信息here

E.g

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

});

答案 2 :(得分:1)

这不是您要求的目的,但可能是您正在寻找Any+Time(TM) Datepicker/Timepicker AJAX Widget with Time Zone Support可以显示时区列表在时间选择器中,使用户可以轻松选择适当的时区。它也很容易定制,并且允许比使用下拉或滑块的大多数其他时间选择器更快的选择。我希望这有帮助!

答案 3 :(得分:0)

我知道我迟了一年,而且我可能在这里遗漏了一些东西,但select元素的size元素有什么问题?

<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。