javascript - 如何防止表格数据元素合并到一列中？

Question

我正在将 API 数据加载到table使用 Flask 中，一旦将元素放置在它们的单元格中，我就有 jQuery 将引导类添加到td元素中。当我添加引导类"btn"和"btn-secondary"时，两个 td 元素并排粘贴在我希望它们在各自列中的位置。

<table>
  <tbody id="myTable">
    {% for row in values %}
    <tr class="item">
      <td class="link"><a href="#">Link</a></td>
      {% for element in row['values'] %}
      <td>{{ element }}</td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>

for 循环是 jinja 模板，用于将值替换到表中

$(".item td:nth-child(7)").addClass("requestedStatus btn btn-secondary");
$(".item td:nth-child(7)").on('click', function() {
  $(this).text($(this).text() == 'IN' ? 'OUT' : 'IN');
})

// Add button feature and Toggle text between True and False for usageFlag column 
$(".item td:nth-child(8)").addClass("usageFlag btn");
$(".item td:nth-child(8)").on('click', function() {
  $(this).text($(this).text() == 'True' ? 'False' : 'True');
})

请在这方面帮助我。

标签： javascripthtmlcssbootstrap-4