在可见单元格下方显示隐藏的表格单元格答案

【问题标题】：Show hidden table cells below visible cells在可见单元格下方显示隐藏的表格单元格
【发布时间】：2017-08-10 22:38:44
【问题描述】：

下面是代码示例：

function Qwe() {
    $('table tr td').each(function () {
        if ($(this).is(':hidden') && !$(this).hasClass('clickMe')) {
            $(this).addClass('hideable'); //I also have some css for this class aka I have a reason for giving it class
        }
    });
}
$(document).ready(function () {
    Qwe();
    $('td.clickMe').click(function () {
        $(this).parent().find('.hideable').toggleClass('hideable-show');
    });
    $(window).resize(function () {
        Qwe();
    });
});

/*all of this is inside @media(max-widht:360px)*/
thead td {
  display: none;
}
thead td:first-child, thead td:nth-child(2) {
  display: table-cell;
}
tr td {
  display: none;
}
tr td:first-child, tr td:nth-child(2), .clickMe {
  display: table-cell;
}
table tr td.hideable-show {
  display: table-row;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<thead>
  <td>cell1</td>
  <td>cell2</td>
  <td>cell3</td>
  <td>cell4</td>
  <td>cell5</td>
  <td>cell6</td>
</thead>
<tr>
  <td>asd</td>
  <td>asd</td>
  <td><span class="hiddenName">cell3-</span>asd</td>
  <td><span class="hiddenName">cell4-</span>asd</td>
  <td><span class="hiddenName">cell5-</span>asd</td>
  <td><span class="hiddenName">cell6-</span>asd</td>
  <td class="clickMe">details</td>
</tr>
<tr>
  <td>asd</td>
  <td>asd</td>
  <td><span class="hiddenName">cell3-</span>asd</td>
  <td><span class="hiddenName">cell4-</span>asd</td>
  <td><span class="hiddenName">cell5-</span>asd</td>
  <td><span class="hiddenName">cell6-</span>asd</td>
  <td class="clickMe">details</td>
</tr>
</table>

</body>

点击“详情”后我想要达到的效果：

cell1   cell2
asd     asd     details
cell3-asd
cell4-asd
cell5-asd
cell6-asd
asd     asd     details
cell3-asd
cell4-asd
cell5-asd
cell6-asd

有什么建议/想法吗？由于垂直对齐（不能使用 flexbox）和每列的“微调”宽度，我真的不想恢复使用“div”。

编辑：忘了提 - 它用于通过 css 动态隐藏单元格并详细显示它们。

【问题讨论】：

请在问题中包含所有相关代码。小提琴应该只是补充。
@Utkanos 给你。
你必须把细节 post asd 和单元格之前

标签： jquery html css

【解决方案1】：

您需要对表结构进行更多操作，而不仅仅是切换一个类。

下面是为每个找到的.hideable 创建一个新行的示例。
在这些新行中，以相反的顺序一一追加.clone()...
然后，在用户单击的行之后追加新行。

代码一步一步注释得很好。

function Qwe() {
  $('table tr td').each(function () {
    if ($(this).is(':hidden') && !$(this).hasClass('clickMe')) {
      $(this).addClass('hideable'); //I also have some css for this class aka I have a reason for giving it class
    }
  });
}

$(document).ready(function () {
  Qwe();
  
  $('td.clickMe').click(function () {
    
    //Remove all previously appended cells.
    $(".hideable-show").parent().remove();
    
    var hiddenCells = $(this).parent().find('.hideable');
    
    // Loop trought all hideable found in the reverse order
    for(i=hiddenCells.length-1;i>=0;i--){
      // Create a new row
      var newRow = $("<tr>").append(hiddenCells.eq(i).clone().addClass('hideable-show'));
      // Append the new row after this row
      $(this).parent("tr").after(newRow);
    }
  });
  
  $(window).resize(function () {
    Qwe();
  });
});

/*all of this is inside @media(max-widht:360px)*/
thead td {
  display: none;
}
thead td:first-child, thead td:nth-child(2) {
  display: table-cell;
}
tr td {
  display: none;
}
tr td:first-child, tr td:nth-child(2), .clickMe {
  display: table-cell;
}
table tr td.hideable-show {
  display: table-cell;        /* Has to be a cell */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<thead>
  <td>cell1</td>
  <td>cell2</td>
  <td>cell3</td>
  <td>cell4</td>
  <td>cell5</td>
  <td>cell6</td>
</thead>
<tr>
  <td>asd</td>
  <td>asd</td>
  <td><span class="hiddenName">cell3-</span>asd</td>
  <td><span class="hiddenName">cell4-</span>asd</td>
  <td><span class="hiddenName">cell5-</span>asd</td>
  <td><span class="hiddenName">cell6-</span>asd</td>
  <td class="clickMe">details</td>
</tr>
<tr>
  <td>asd</td>
  <td>asd</td>
  <td><span class="hiddenName">cell3-</span>asd</td>
  <td><span class="hiddenName">cell4-</span>asd</td>
  <td><span class="hiddenName">cell5-</span>asd</td>
  <td><span class="hiddenName">cell6-</span>asd</td>
  <td class="clickMe">details</td>
</tr>
</table>

</body>

【讨论】：

这是我的第一个想法，但我想尽可能避免通过 js 操作代码。但我想我必须接受这个。我会让它开放一段时间，看看是否有人有其他想法。

【解决方案2】：

当您通过 each() 引用它们时您将它们切换到同一行：

function Qwe() {
    $('table tr td').each(function () {
        if ($(this).is(':hidden') && !$(this).hasClass('clickMe')) {
            $(this).addClass('hideable'); //I also have some css for this class aka I have a reason for giving it class
        }
    });
}
$(document).ready(function () {
    Qwe();
    $('td.clickMe').click(function () {
        $(this).parent().find('.hideable').each(
      function( index, element ) {

        $( element ).toggle(".hideable-show");
      }
      );  
    });
    $(window).resize(function () {
        Qwe();
    });
});

https://jsfiddle.net/ku5nq4c5/2/

【讨论】：