Javascript 切换行中的隐藏列数据
我的html表中有两个隐藏列(我曾尝试使用隐藏行,切换效果很好,但它打乱了我的行数) 我想切换显示行下方行中的隐藏列数据。 我目前的状态是它确实在切换,但它涵盖了表中的下一行 是否有一种方法可以创建一个临时新行,该新行将放置在单击的行下方,从而在不隐藏下一行的情况下切换隐藏的列数据 任何帮助都将不胜感激:) 这是由PHP脚本填充的我的表:Javascript 切换行中的隐藏列数据,javascript,html,rows,hidden,Javascript,Html,Rows,Hidden,我的html表中有两个隐藏列(我曾尝试使用隐藏行,切换效果很好,但它打乱了我的行数) 我想切换显示行下方行中的隐藏列数据。 我目前的状态是它确实在切换,但它涵盖了表中的下一行 是否有一种方法可以创建一个临时新行,该新行将放置在单击的行下方,从而在不隐藏下一行的情况下切换隐藏的列数据 任何帮助都将不胜感激:) 这是由PHP脚本填充的我的表: if($SELECT != false) { while($rows = mysqli_fetch_array($SELECT)) { echo "
if($SELECT != false)
{
while($rows = mysqli_fetch_array($SELECT))
{
echo "
<tr>
<td><label><input type=\"checkbox\" name=\"lead\" value=\"".$rows["email"]."\" /></label></td>
<td>".$rows["createdTime"]."</td>
<td>".$rows["firstName"]."</td>
<td>".$rows["lastName"]."</td>
<td>".$rows["email"]."</td>
<td>".$rows["phoneNumber"]."</td>
<td>".$rows["country"]."</td>
<td>".$rows["ip"]."</td>
<td>".$rows["affiliate"]."</td>
<td>".$rows["description"]."</td>
<td>".$rows["broker"]."</td>
<td>".$rows["status"]."<br> <br>
Comment:<b> ".$rows["comment"]."</b></td>
<td>".$rows["ftd"]."</td>
<td colspan=\"13\">
Transaction Id: ".$rows["transaction_id"]."
<br>
<br>
Balance: ".$rows["balance"]."
</td>
";
}
}
第一个解决方案:
为什么不在你想显示的列后面做一个隐藏的行(在每一个可见的行之后),并在你将鼠标悬停在第一行之后使它可见呢
第二种解决方案:
将隐藏的数据放在div中,将显示的数据放在div中。让两者都是td元素的子元素。如果显示隐藏的div,tr高度将缩放。您能告诉我们您已经尝试了什么吗?当然!添加:)如果您试图隐藏列,那么您应该获取列的一些索引,并设置display:none of the single cell。我还使用了TableFilter,它将行计数与分页功能混淆,然后尝试此操作,并使两个div的宽度均为100%,以便它们将垂直显示
$(function() {
$("tr").find("td[colspan=13]").hide();
$("table").click(function(event) {
if($(event.target).is('input')){
return;
}
else{
var $target = $(event.target);
$target.closest("tr").next().find("td").slideToggle(-2000);
}
});
});