Question

以下是代码示例：

＆＃13;

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

＆＃13;

/*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;
}

＆＃13;

<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>

＆＃13;

点击＆＃34;详细信息＆＃34;：

后我想要实现的目标

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

有任何建议/想法吗？我真的不想恢复使用＆＃34; div＆＃34;＆＃34;由于垂直对齐（不能使用flexbox）和＆＃34;微调＆＃34;每列的宽度。

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

Answer 1

您需要操纵表结构，而不仅仅是切换类。

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

代码已逐步评论。

＆＃13;

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

＆＃13;

/*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 */
}

＆＃13;

<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>

＆＃13;

Answer 2

当你通过每个（）来引用它们时你将它们切换到同一行：

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/

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

2 个答案: