Javascript 显示或隐藏动态添加行的表列

我有一个带有一些隐藏列的表，当用户单击按钮时，我需要显示这些隐藏列。然后，当单击页面上的其他位置时，会向该表提供其他数据。所以基本上我有一个表，可以在以后填充

我已经设法使用jQuery的切换来完成这项工作，但问题是新添加的行将保持原始css属性，并被隐藏

<style>
.hidden { display: none;}
</style>
<table>
<tr>
<th>test</th>
<th class="hidden">you cannot see me</th>
</tr>
<tr>
<td>test</td>
<td class="hidden">you cannot see me</td>
</tr>
</table>
<button onclick="$('.hidden').toggle()">
<button onclick="addrow ()">

.hidden{显示：无；}
测验
你看不见我
测验
你看不见我

请原谅任何打字错误或语法错误

我第一次单击按钮时，会显示隐藏列

如果然后单击addrow，则新添加的行具有原始显示：无，因此我将展开第1行，隐藏第2行

---

如何使新行处于上次显示状态？

我已删除内联JS

我已经为切换按钮添加了一个数据属性（也可以通过检查已经放置的单元格来完成，但是我认为如果您想要添加其他功能，这会更好）

HTML

<style>
.hidden { display: none;}
</style>
<table>
<tr>
<th>test</th>
<th class="hidden">you cannot see me</th>
</tr>
<tr>
<td>test</td>
<td class="hidden">you cannot see me</td>
</tr>
</table>
<button class="toggle" data-state="off">
<button class="add-row">

---

我通过在生成新行的php代码中添加一个检查来解决这个问题。

---

在新行中，如果行显示为隐藏或显示，请单击“我传递到帖子”。在后一种情况下，我在.hidden单元格中添加了一个style=“display:table row；”，因此它们在表中已经可见。

您能否向我们展示

addrow（）

函数的代码。此外，为了可读性/可维护性，我会删除内联JS。为什么不直接使用jQuery获取前一行的

.hidden

单元格的可见性？这是一个很好的解决方案，但我希望添加已经可见或不可见的行，以避免用户混淆，或者添加看起来隐藏或不隐藏的行。

$('document').ready(function() {
  $('.toggle').click(function() {
    if ($(this).data('state') == 'off') {
      $(this).data('state', 'on')
    } else {
      $(this).data('state', 'off')
    }
    $('.hidden').toggle();
  });

  $('add-row').click(function() {
    // code that adds the row

    if ($('.toggle').data('state') == 'on') {
      $('.hidden').show();
    }
  });
});