How to set value input time from clickable table javascript

Question

I want to set time value from javascript when tr table clicked, but it's just work on first row. then if i try to alert (not set value) its working idk whats the problem, here is my code :

Note : table code is to long so i cannot share but table id is example_table

I hope time value can be set every click any table row

$(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">

You cannot use same id for multiple elements either change it to class or use unique ids for `start` assuming that you have same id for multiple inputs on different trs . — Swati, Feb 13 '23 at 06:32
Hi, Any particular reason you removed the "accept " from my answer? — mplungjan, Mar 24 '23 at 06:27

mplungjan · Answer 1 · 2023-02-14T09:34:08.260

It would have been great to have a minimal reproducible example with at least 3 rows.

jQuery .delegate is deprecated for .on
Use relative selection
IDs need to be unique.
use toISOString to get the time in hh:mm in the simplest way.

$(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>

If you have a button in one cell and the time in another, you can use closest to navigate to the row and then to the input:

$(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>

How to set value input time from clickable table javascript

1 Answers1