Access and Disable/enable input type date in td

Question

I have a table that contains 2 Date type inputs, a span and 2 clickable icons for edit and save. What I am aiming for is to enable the input type date in my td's "onClick" on Edit Icon. But I don't know how to access the element in the td, to alter the disabled attribute. On edit the disabled attribute should be False, and after alteration if he clicks the save icon, the disabled attribute should go back to True. A plus would be for me, if I can make the save icon disabled(not clickable) by default, if the edit button was not clicked first, and after save it goes back to being disabled.

This is my HTML code:

<table class="table table-striped" id="pageNbr">
  <thead>
    <tr class="header">
      <th>Begin Date</th>
      <th>End Date</th>
      <th>School Year</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
      <td><input type="date" class="EndDate" id="enddate" disabled> </td>
      <td> <span id="Syear"> 2021-2022</span></td>
      <td style="box-shadow: none !important; background-color: white !important;">
        <a href="#"><i class="far fa-save Icon-save"></i></a>
        <a href="#">
          <i class="far fa-edit Icon-edit"></i></a>
      </td>
    </tr>
  </tbody>
</table>

My jQuery so far is:

$('.Icon-edit').click(function() {
  var currentTD = $(this).parents('tr').find('td');
  $.each(currentTD, function() {
    $(this).prop();
  });
});


$('.Icon-save').click(function() {
  var currentTD = $(this).parents('tr').find('td');
  $.each(currentTD, function() {
    $(this).prop();
  });
});

score 1 · Answer 1 · answered Apr 22 '21 at 22:50

you can assign a class to your row, then get its child td by index:

<tr class="myclass">
    <td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
    <td><input type="date" class="EndDate" id="enddate" disabled> </td>
    <td> <span id="Syear"> 2021-2022</span></td>
    <td style="box-shadow: none !important; background-color: white !important;">
      <a href="#"><i class="far fa-save Icon-save"></i></a>
      <a href="#">
      <i class="far fa-edit Icon-edit"></i></a>
    </td>
</tr>

$(".myClass").find("td:eq(4)");

Related Link: Get second td of tr using jquery

charlietfl · Accepted Answer · 2021-04-22T23:05:57.250

You can do this in one event listener and check the class of the one that was clicked to determine disable/enable.

I added classes to the <a> rather than using the <i> and added css to hide the "save" by default then use hide/show to toggle display on the buttons

$('.date-toggle').click(function() {
  const $btn = $(this);
  const disable = $btn.hasClass('save');
    
  $btn.closest('tr').find('.BeginDate, .EndDate').prop('disabled', disable);
  $btn.hide().siblings('.date-toggle').show()

});

.date-toggle.save{display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="pageNbr">
  <thead>
    <tr class="header">
      <th>Begin Date</th>
      <th>End Date</th>
      <th>School Year</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
      <td><input type="date" class="EndDate" id="enddate" disabled> </td>
      <td> <span id="Syear"> 2021-2022</span></td>
      <td style="box-shadow: none !important; background-color: white !important;">
        <a href="#" class="date-toggle save" ><i class="far fa-save Icon-save">Save</i></a>
        <a href="#"  class="date-toggle edit">
          <i class="far fa-edit Icon-edit">Edit</i></a>
      </td>
    </tr>
  </tbody>
</table>

bro I have a problem, the code is running fine, but each time i insert a new record the code doesnt work on it. I have a button that inserts a new record in the table using append function, with the same 'tr' code that you provided. is there a way to fix this prob? — elias hayar, Apr 23 '21 at 10:08
Use event delegation then https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — charlietfl, Apr 23 '21 at 11:58
Do you mind writing down how its going to be used with my code , Im new to this domain... — elias hayar, Apr 23 '21 at 13:50
`$('table').on('click', '.date-toggle', function(){/* same as answer*/})` — charlietfl, Apr 23 '21 at 13:54

Access and Disable/enable input type date in td

2 Answers2