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

我有一个表，其中包含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>

---

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

我在

---

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

---

相关链接：

bro我有一个问题，代码运行正常，但每次我插入一条新记录时，代码都不起作用。我有一个按钮，它使用append函数在表中插入一条新记录，代码与您提供的相同。有没有办法解决这个问题？使用事件委派然后你介意写下它将如何与我的代码一起使用吗，我是这个域的新手…

$（'table'）。在（'click'，'date toggle'，function（）{/*与answer*/}相同）

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