Question

这是一个令人困惑的问题，但我基本上是在尝试创建一个锻炼表，在其中可以添加集合，然后隐藏新创建的集合。任何想法如何做到这一点？到目前为止，这是我的HTML和JS代码：

因此，如您所见，添加集按钮可以正常工作，但是一旦添加集，就无法将其隐藏。我只能隐藏当前设置为“隐藏”的初始设置。如果有帮助，这是图片外的代码：

document.querySelector('.add-set-btn').addEventListener('click', function() {
  var html = '<tr class="new-set"><td colspan="2"></td><td>Warm-up</td><td>120lbs</td><td>12</td><td>90s</td></tr>';
  document.querySelector('.add-html').insertAdjacentHTML('beforebegin', html);
});



document.querySelector('.hide-row').style.display = 'none';
document.querySelector('.toggle-view-btn').addEventListener('click',
  function() {
    if (document.querySelector('.hide-row').style.display === "none") {
      document.querySelector('.hide-row').style.display = "table-row";
    } else if (document.querySelector('.hide-row').style.display === "table-row") {
      document.querySelector('.hide-row').style.display = "none";
    }
  })

html,
body {
  background-color: #fff;
  color: #cbcbcb;
  font-family: 'Roboto', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  background-color: #202d3a;
}

.icon {
  cursor: pointer;
}

.add-set {
  text-align: center;
}

.add-set-btn {
  cursor: pointer;
}

<body>
  <section class="workout-table">
    <table class="table table-condensed table-dark">
      <thead>
        <tr>
          <th></th>
          <th>Exercise</th>
          <th>Sets</th>
          <th>Weight</th>
          <th>Reps</th>
          <th>Rest</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><button type="button" class="btn-dark btn btn-sm toggle-view-btn"><i class="icon ion-md-add"></i></button></td>
          <td>Bench Press</td>
          <td>4</td>
          <td>120lbs</td>
          <td>12</td>
          <td>90s</td>
        </tr>
        <tr class="hide-row">
          <td colspan="2"></td>
          <td>Warm-up</td>
          <td>120lbs</td>
          <td>12</td>
          <td>90s</td>
        </tr>

        <tr class="add-html">
          <td class="add-set" colspan="6"><button type="button" class="btn btn-dark btn-sm add-set-btn"><i class="icon ion-md-add"></i> Add Set</button></td>
        </tr>
      </tbody>
    </table>

  </section>

</body>

通过Javascript添加元素后如何隐藏它？

0 个答案: