Question

我有一个包含一些隐藏列的表格，我需要在用户点击按钮时显示这些列。然后，当在页面上的其他位置单击时，该表将被提供其他数据。所以基本上我有一张桌子可以在以后填充。

我已经设法使用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 ()">

原谅任何拼写错误或语法错误。

我第一次点击按钮时会显示隐藏栏。

如果我然后单击addrow，则新添加的行具有ORIGINAL display：none，因此我将第1行展开，第2行隐藏。

如何让新行成为最后一个显示状态？

Answer 1

我删除了内联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">

<强> JS

$('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();
    }
  });
});

Answer 2

我通过在生成新行的php代码中添加一个检查来解决。在新行单击时，如果线条应显示为隐藏或显示，则传递到帖子。在后一种情况下，我添加了一个style =“display：table-row;”到.hidden单元格，所以它们已经在桌面上显示出来了。

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

2 个答案: