2

JQuery の一般的な「行ピッカー」を探しています。

日付ピッカー、カラー ピッカー、タイム ピッカーなどのクールな「ピッカー」ツールを見てきました。テキスト ボックスをクリックすると、小さなカレンダー、カラー パレット、時計などが表示されます。何か (日付など) を選択すると、テキスト ボックスに値が入力されます。

何か（テーブル、divなど）にいくつかのデータ行（タイムゾーンのリストなど）を入力できる万能の「行ピッカー」が本当に必要です。これはテキスト フィールドにリンクされ、ユーザーがフィールドをクリックするとポップアップします。

行 (タイムゾーンなど) をクリックすると、タイムゾーン ID がフィールドに返されます。

これを行うものを知っている人はいますか？

ありがとう！

4

4 に答える 4

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 を使用して、クリックの結果をターゲット フィールドに入力できます。次に、すべてのデータ テーブルが同じように機能する規則を考え出すことができます。これにより、これをアプリケーションの汎用ピッカーに一般化できます。

于 2008-10-14T01:26:00.117 に答える
2

このシナリオでは、イベント委任を使用することをお勧めします。そのため、イベント ハンドラーをテーブル自体に配置します。これにより、かなりの数の行がある場合に非常にコストがかかる行ごとにハンドラーをバインドする必要がなくなります。その後、event.target を使用して、イベントの原因となった要素をクエリし、そこから移動できます。

詳細はこちら

例えば

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

});
于 2008-10-14T08:21:06.787 に答える
1

これはまさにあなたが求めていたものではありませんが、あなたが探しているものかもしれません: Any+Time(TM) Datepicker/Timepicker AJAX Widget with Time Zone Supportは、タイム ピッカーにタイムゾーンのリストを表示することができます。ユーザーは適切なタイムゾーンを簡単に選択できます。カスタマイズも簡単で、ドロップダウンやスライダーを使用する他のほとんどのタイム ピッカーよりも高速に選択できます。これが役立つことを願っています！

于 2010-04-24T14:03:53.857 に答える
0

1 年遅れていることはわかっていますが、おそらくここで何かが欠けていると思いますが、属性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 イベントを適切に処理でき、希望通りの正確な外観を生成するようです。好きなように。

標準の HTML が機能する場合、私は次のように言います。標準の HTML を使用します。

于 2010-04-24T14:10:31.170 に答える