錶行崩潰問題

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

你應該隱藏表格行而不是單元格。你應該將顯示設置爲表格行，而不是塊

$("#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>