ошибка строки строки таблицы

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

Вы также не должны иметь дело со всеми Попутно ид. Лично я полагался бы на классы, а не на установление источников и отображение кода.

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