在 td 中访问和禁用/启用输入类型日期答案

【问题标题】：Access and Disable/enable input type date in td在 td 中访问和禁用/启用输入类型日期
【发布时间】：2021-07-17 03:37:43
【问题描述】：

我有一个表格，其中包含 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();
  });
});

【问题讨论】：

标签： javascript html jquery html-table disabled-input

【解决方案1】：

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

我向<a> 添加了类，而不是使用<i>，并添加了css来默认隐藏“保存”，然后使用隐藏/显示来切换按钮上的显示

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

【讨论】：

兄弟我有一个问题，代码运行良好，但是每次我插入一条新记录时，代码都不起作用。我有一个按钮，它使用 append 函数在表中插入一条新记录，使用与您提供的相同的“tr”代码。有没有办法解决这个问题？
使用事件委托然后stackoverflow.com/questions/203198/…
你介意写下它如何与我的代码一起使用吗，我是这个领域的新手...
$('table').on('click', '.date-toggle', function(){/* same as answer*/})

【解决方案2】：

您可以为您的行分配一个类，然后通过索引获取其子 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)");

相关链接：Get second td of tr using jquery

【讨论】：