javascript - 表格行折叠问题

Question

我有一个包含四列的表格，在最后一列中我有一个图像，当我单击图像时我想显示子行。下面是我的代码:

<%@ taglib uri="/WEB-INF/c.tld" prefix="c"%>
<style>
    table,th,td {
        border: 1px solid black;
    } 
</style>
<script type="text/javascript">

    function showemail(index){
        if($("#img" + index).attr("src") == "resources/details_close.png")
        {
            $("#img" + index).attr("src", "resources/details_open.png");    
            $("#email" + index).css("display", "none");
        }
        else
        {
            $("#img" + index).attr("src", "resources/details_close.png");   
            $("#email" + index).css("display", "block");
            $(".imgClass").each(function(inx){
                if(index != inx){
                    $("#email" + inx).css("display", "none");
                    $("#img" + inx).attr("src", "resources/details_open.png");  
                }
            });
        }            
    }

</script>

<table style="padding: 20px;" align="center" width="90%" class="display">
    <thead>
        <tr>
            <th width="2%">Id</th>
            <th width="10%">First Name</th>
            <th width="10%">Last Name</th>
            <th width="10%">Email</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach var="items" items="${sessionScope.userList}" varStatus="loop">
            <tr>
                <td>${items.associateId }</td>
                <td>${items.firstName }</td>
                <td>${items.lastName }</td>
                <td>
                    <img alt="" src="resources/details_open.png"
                    id = "img${loop.index}" onclick="showemail(${loop.index})"
                    class="imgClass">
                </td>
            </tr>
            <tr>
                <td style="display: none" colspan="4"  id="email${loop.index}" align="center">                      
                    ${items.email}                          
                </td>
            </tr>
        </c:forEach>    
    </tbody>
</table>

问题是我不想重新调整父行列的大小，但是，如果我删除 style="display:none"，父列不会重新调整大小。但是如果我保留 style="display:none" 那么它正在调整大小。

你能告诉我哪里错了吗？

Answer 1

您应该隐藏表格行而不是单元格。您应该将显示设置为表格行，而不是 block

$("#email"+index).css("display","table-row");

您也不需要处理所有的 id 传递。就我个人而言，我会依赖类而不是设置源代码和显示代码。

$("table tbody").on("click", ".imgClass", function () {

    var img = $(this);
    var isOn = img.toggleClass("on").hasClass("on");
    var nextTR = img.closest("tr").next().toggleClass("on", isOn);
    nextTR
        .siblings(".on").removeClass("on")
        .prev().find(".on")
             .removeClass("on");
  


});

table { border-collapse: collapse; }
tr, td { border: 1px solid black; }

.imgClass {
    background-color: red;
    /* Set with/height to match image */
    width: 30px;
    height: 30px;
    /*background-image: url(off.jpg); */
}

.imgClass.on {
    background-color: green;  
    /*background-image: url(on.jpg); */
}

table tbody tr:nth-child(2n+0) {
    display: none;  
}
table tbody  tr.on {
    display: table-row;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr><td>1-1</td><td>1-2</td><td>1-3</td><td><button class="imgClass">1X</button></td></tr>
    <tr><td colspan="4">QWERTY</td></tr>
    <tr><td>2-1</td><td>2-2</td><td>2-3</td><td><button class="imgClass">2X</button></td></tr>
    <tr><td colspan="4">QWERTY</td></tr>
    <tr><td>3-1</td><td>3-2</td><td>3-3</td><td><button class="imgClass">3X</button></td></tr>
    <tr><td colspan="4">QWERTY</td></tr>
  </tbody>