{"id":28263,"date":"2022-12-29T17:50:15","date_gmt":"2022-12-29T12:20:15","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-show-hidden-table-cells-below-visible-cells\/"},"modified":"2022-12-29T17:50:15","modified_gmt":"2022-12-29T12:20:15","slug":"solved-show-hidden-table-cells-below-visible-cells","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-show-hidden-table-cells-below-visible-cells\/","title":{"rendered":"[Solved] Show hidden table cells below visible cells"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

You need to manipulate the table structure a bit more than just toggling a class.<\/p>\n

Below is an example to create a new row for each .hideable<\/code> found.
\nIn those new rows, append a .clone()<\/code> of them one by one in the reverse order…
\nAnd then, append the new row after the row where user clicked.<\/p>\n

Code is well commented step by step.<\/p>\n<\/p>\n

\n
\n
function Qwe() {\r\n  $('table tr td').each(function () {\r\n    if ($(this).is(':hidden') && !$(this).hasClass('clickMe')) {\r\n      $(this).addClass('hideable'); \/\/I also have some css for this class aka I have a reason for giving it class\r\n    }\r\n  });\r\n}\r\n\r\n$(document).ready(function () {\r\n  Qwe();\r\n  \r\n  $('td.clickMe').click(function () {\r\n    \r\n    \/\/Remove all previously appended cells.\r\n    $(\".hideable-show\").parent().remove();\r\n    \r\n    var hiddenCells = $(this).parent().find('.hideable');\r\n    \r\n    \/\/ Loop trought all hideable found in the reverse order\r\n    for(i=hiddenCells.length-1;i>=0;i--){\r\n      \/\/ Create a new row\r\n      var newRow = $(\"<tr>\").append(hiddenCells.eq(i).clone().addClass('hideable-show'));\r\n      \/\/ Append the new row after this row\r\n      $(this).parent(\"tr\").after(newRow);\r\n    }\r\n  });\r\n  \r\n  $(window).resize(function () {\r\n    Qwe();\r\n  });\r\n});<\/code><\/pre>\n
\/*all of this is inside @media(max-widht:360px)*\/\r\nthead td {\r\n  display: none;\r\n}\r\nthead td:first-child, thead td:nth-child(2) {\r\n  display: table-cell;\r\n}\r\ntr td {\r\n  display: none;\r\n}\r\ntr td:first-child, tr td:nth-child(2), .clickMe {\r\n  display: table-cell;\r\n}\r\ntable tr td.hideable-show {\r\n  display: table-cell;        \/* Has to be a cell *\/\r\n}<\/code><\/pre>\n
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\r\n<body>\r\n<table>\r\n<thead>\r\n  <td>cell1<\/td>\r\n  <td>cell2<\/td>\r\n  <td>cell3<\/td>\r\n  <td>cell4<\/td>\r\n  <td>cell5<\/td>\r\n  <td>cell6<\/td>\r\n<\/thead>\r\n<tr>\r\n  <td>asd<\/td>\r\n  <td>asd<\/td>\r\n  <td><span class=\"hiddenName\">cell3-<\/span>asd<\/td>\r\n  <td><span class=\"hiddenName\">cell4-<\/span>asd<\/td>\r\n  <td><span class=\"hiddenName\">cell5-<\/span>asd<\/td>\r\n  <td><span class=\"hiddenName\">cell6-<\/span>asd<\/td>\r\n  <td class=\"clickMe\">details<\/td>\r\n<\/tr>\r\n<tr>\r\n  <td>asd<\/td>\r\n  <td>asd<\/td>\r\n  <td><span class=\"hiddenName\">cell3-<\/span>asd<\/td>\r\n  <td><span class=\"hiddenName\">cell4-<\/span>asd<\/td>\r\n  <td><span class=\"hiddenName\">cell5-<\/span>asd<\/td>\r\n  <td><span class=\"hiddenName\">cell6-<\/span>asd<\/td>\r\n  <td class=\"clickMe\">details<\/td>\r\n<\/tr>\r\n<\/table>\r\n\r\n<\/body><\/code><\/pre>\n<\/div>\n<\/div><\/div>\n
<\/div>\n<\/div>\n
            1<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Show hidden table cells below visible cells <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] You need to manipulate the table structure a bit more than just toggling a class. Below is an example to create a new row for each .hideable found. In those new rows, append a .clone() of them one by one in the reverse order… And then, append the new row after the row where …