Question

所以我正在编写一个使用php从数据库中收集数据的程序，我正在创建HTML字符串，如下所示。

然后我在我的HTML文件中回显这些数据并使用bootstrap来创建表，并且表格完美地出来了，但我希望能够让使用我的网站的用户能够点击关于他们点击的行的行和更详细的数据。我写的尝试完成此操作的代码如下：

$htmlStr .= '<tr data-toggle="myCollapse" data-target="#details" class="accordion-toggle">';
$htmlStr .= '<td>' some data '</td>';
$htmlStr .= '<td class="text-center">' . number_format(more data) . '</td>';
$htmlStr .= '<td class="text-right">' . round(percentage of certain data) . '%</td>';
$htmlStr .= '</tr>';

$more = FunctionForDetails(details looking for);
$htmlStr .= $more;

其中FunctionForDetails（）返回：

$htmlStr .= '<tr id="details" class="myCollapse">';
$htmlStr .= '<td class="text-center"><div>' . detailed data . '</div></td>';
$htmlStr .= '<td class="text-center"><div>' . more . '</div></td>';
$htmlStr .= '<td class="text-center"><div>' . more . '%</div></td>';
$htmlStr .= '</tr>';

我的表格对所有行都很好，但是当我点击一行时，没有任何反应。我想要更详细的数据，关于他们点击的行下拉更多的行，然后再次点击它时就会消失。我还写了一些css和jQuery来配合它，但它仍然无效。是的，我将引导程序库和jquery库链接到我的HTML。任何想法或有用的提示都会很棒，谢谢！

CSS代码：

table .myCollapse {
   display: none;
}
table .myCollapse.in {
  display: table-row; !important
}

jQuery代码：

$(".myCollapse").click(function() { if($('#versions').hasClass('in')){ $('#versions').removeClass('in'); } else{ $('#versions').addClass('in'); } });

Answer 1

＆＃34; in＆＃34;上课没有合作！重要的是在分号之后。所以尝试这样做，我认为你至少会注意到一些变化：

table .myCollapse.in {
  display: table-row !important;
}

Bootstrap显示和折叠表行

1 个答案: