JQuery "Any Row" Picker

Question

Я ищу универсальный "Row Picker" для JQuery.

Мы все видели классные инструменты «Выбор», такие как выбор даты, выбор цвета, выбор времени и т. Д., Где вы щелкаете текстовое поле и появляется маленький календарь, или цвет, или часы, или что-то еще. Вы выбираете что-то (например, дату), а затем текстовое поле заполняется значением.

Мне действительно нужен универсальный "сборщик строк", где вы можете заполнить что-то (таблица, div и т. Д.) Несколькими строками данных (скажем, списком часовых поясов). Это будет связано с текстовым полем и появится, когда пользователь щелкнет по полю.

Они щелкают строку (скажем, часовой пояс), и идентификатор часового пояса передается обратно в поле.

Кто-нибудь знает что-нибудь, что делает это?

Спасибо!

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>

Это добавляет щелчок к каждой строке, находит в строке помеченный идентификатор, который затем позволяет вам что-то с ним делать. Очевидно, вам нужно нацелить это на вашу таблицу данных и фильтровать на основе содержимого. Затем JQuery можно использовать для заполнения результата щелчка в целевом поле. Затем вы можете прийти к соглашению, в котором все ваши таблицы данных работают одинаково, что позволит вам обобщить это в универсальный инструмент выбора для вашего приложения.

Answer 2

В этом сценарии лучше использовать делегирование событий. Поэтому поместите обработчик событий на саму таблицу, чтобы избежать необходимости связывать обработчик для каждой строки, что довольно дорого, если у вас достаточно много строк. Затем вы можете использовать event.target, чтобы запросить, какой элемент был ответственен за событие, и перейти оттуда.

Подробнее здесь

1007 * например *

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

});

Answer 3

Это не совсем то, что вы просили , но это может быть то, что вы ищете для: Any + Time (TM) Datepicker / Timepicker AJAX Виджет с поддержкой часовых поясов может отображать список часовых поясов прямо в палитре времени, упрощая пользователю выбор подходящего часового пояса. Он также прост в настройке и обеспечивает более быстрый выбор, чем большинство других сборщиков времени, которые используют раскрывающиеся списки или ползунки. Надеюсь, это поможет!

Answer 4

Я знаю, что я опоздал на год, и что я, возможно, что-то здесь упускаю, но что не так с элементом 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.