在一行中切换隐藏的列数据

时间:2017-04-12 08:19:40

标签: javascript html rows hidden

我的html表中有两个隐藏的列(我尝试使用隐藏的行,切换效果很好,但是我的行数搞乱了) 我想在显示的行下面的行中切换隐藏的列数据。 我目前的状态是它确实在切换,但它涵盖了表格中的下一行。

有没有办法创建一个临时的新行,该行将放置在点击的行下面,该行将切换隐藏的列数据而不隐藏下一行?

任何帮助将不胜感激:)

这是我的表格,由PHP脚本填充:

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>
    ";
}
}

这是我的切换功能:

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

1 个答案:

答案 0 :(得分:0)

第一个解决方案:

为什么不用你想要显示的列创建一个隐藏的行(在每个可见行之后)。并在你悬停第一行后使其可见?

第二个解决方案:

将隐藏数据放在div中,将显示的数据放在div中。让两者都成为td元素的孩子。如果显示隐藏的div,则tr高度将缩放。