在 td 中访问和 Disable/enable 输入类型日期

Question

我有一个 table，其中包含 2 个日期类型输入、一个跨度和 2 个用于编辑和保存的可单击图标。我的目标是在编辑图标上的 td 的“onClick”中启用输入类型日期。但我不知道如何访问 td 中的元素，以更改 disabled 属性。在编辑时，禁用属性应为 False，更改后如果他单击保存图标，禁用属性应返回 True。如果我可以默认禁用保存图标（不可点击），如果没有先点击编辑按钮，保存后它又回到禁用状态，那么对我来说是一个加号。

这是我的 HTML 代码：

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

我的 jQuery 到目前为止是：

$('.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();
  });
});

Answer 1

您可以在一个事件侦听器中执行此操作，并检查被单击事件的 class 以确定 disable/enable。

我将 classes 添加到 <a> 而不是使用 <i> 并添加 css 以默认隐藏“保存”然后使用 hide/show 在按钮上切换显示

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

Answer 2

您可以将 class 分配给您的行，然后通过索引获取其子 td：

<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)");

在 td 中访问和 Disable/enable 输入类型日期

Access and Disable/enable input type date in td

html

javascript

jquery

html-table

disabled-input