Как установить время ввода значения из кликабельной таблицы javascript

Я хочу установить значение времени из javascript при нажатии таблицы tr, но это работает только в первой строке. тогда, если я попытаюсь предупредить (не установить значение) его рабочий идентификатор, в чем проблема, вот мой код:

Примечание: код таблицы слишком длинный, поэтому я не могу поделиться, но идентификатор таблицы — example_table.

Я надеюсь, что значение времени можно установить каждый щелчок по любой строке таблицы

$(document).ready(function() {
  $("#example_table").delegate("tr", "click", function() {
    var d = new Date(),
      h = (d.getHours() < 10 ? '0' : '') + d.getHours(),
      m = (d.getMinutes() < 10 ? '0' : '') + d.getMinutes();
    now = h + ':' + m;

    $("#start").val(now);
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type = "time" name = "start" class = "form-control form-control-border" id = "start">

Вы не можете использовать один и тот же идентификатор для нескольких элементов, либо изменить его на класс, либо использовать уникальные идентификаторы для start, предполагая, что у вас есть один и тот же идентификатор для нескольких входов на разных trs.

— 13.02.2023 07:32

javascript html jquery web setvalue

13.02.2023 07:27

Что такое двойные вопросительные знаки (??) в JavaScript?

Как безопасно обрабатывать неопределенные и нулевые значения в коде с помощью Nullish Coalescing

Асинхронная передача данных с помощью sendBeacon в JavaScript

В современных веб-приложениях отправка данных из JavaScript на стороне клиента на сервер является распространенной задачей. Одним из популярных...

Принципы ООП в JavaScript

Парадигма объектно-ориентированного программирования имеет 4 основных принципа,

Laravel с Turbo JS

Turbo - это библиотека JavaScript для упрощения создания быстрых и высокоинтерактивных веб-приложений. Она работает с помощью техники под названием...

Слишком много useState? Давайте useReducer!

Современный фронтенд похож на старую добрую веб-разработку, но с одной загвоздкой: страница в браузере так же сложна, как и бэкенд.

Типы данных JavaScript

В JavaScript существует несколько типов данных, включая примитивные типы данных и ссылочные типы данных. Вот краткое объяснение различных типов данных...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Было бы здорово иметь минимальный воспроизводимый пример как минимум с 3 строками.

jQuery .delegate устарел для .on
Использовать относительный выбор
Идентификаторы должны быть уникальными.
используйте toISOString, чтобы получить время в формате чч:мм самым простым способом.

$(function() {
  $("#example_table").on("click", "tr", function() {
      $(this).find(".start").val(new Date().toISOString().slice(11, 16));
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody id = "example_table">
    <tr>
      <td>Click on the row</td>
      <td><input type = "time" name = "start" class = "form-control form-control-border start"></td>
    </tr>
    <tr>
      <td>Click on the row</td>
      <td><input type = "time" name = "start" class = "form-control form-control-border start"></td>
    </tr>
    <tr>
      <td>Click on the row</td>
      <td><input type = "time" name = "start" class = "form-control form-control-border start"></td>
    </tr>
  </tbody>
</table>

Если у вас есть кнопка в одной ячейке и время в другой, вы можете использовать closest для перехода к строке, а затем к вводу:

$(function() {
  $("#example_table").on("click", ".now", function() {
      $(this).closest("tr").find(".start").val(new Date().toISOString().slice(11, 16));
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody id = "example_table">
    <tr>
      <td><button type = "button" class = "now">Now</button></td>
      <td><input type = "time" name = "start" class = "form-control form-control-border start"></td>
    </tr>
    <tr>
      <td><button type = "button" class = "now">Now</button></td>
      <td><input type = "time" name = "start" class = "form-control form-control-border start"></td>
    </tr>
    <tr>
      <td><button type = "button" class = "now">Now</button></td>
      <td><input type = "time" name = "start" class = "form-control form-control-border start"></td>
    </tr>
  </tbody>
</table>

13.02.2023 07:37

Другие вопросы по теме

Рендеринг графики WASM на пользовательский HTML-холст

Как установить переменную равной другой переменной в скрипте Apps Script?

Реакция: не удается загрузить страницу при нажатии кнопки. Вместо этого загружает вопросительный знак

Определите разные кнопки, которые имеют одну и ту же функцию «наведения мыши».

Как использовать ввод HTML-формы для изменения значения на сайте для всех пользователей?

Как исправить фон панели навигации?

HTML: Как отправить электронное письмо по html-ссылке?

Вставка html, созданного в функции r

Как вертикально центрировать текст <p> внутри svg <foreignobject>?

Добавить цвет фона только к нажатой кнопке

Как установить время ввода значения из кликабельной таблицы javascript

Ответы 1

Другие вопросы по теме

Похожие вопросы