Скрыть и показать таблицу внутри другой строки таблицы

У меня есть таблица, которая генерируется динамически:

tables.ejs

 <table>
    <% for(var d=0;d<docs.length;d++)
      {  %>
        <tr>
        <td>
            <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" 

              id="image1" onclick=diffImage(this) />
        </td>
        <td>
          <p><%= docs[d].name %></p></a>
        </td>
        <td>
          <%= docs[d].url_Address %>
        </td>
        <td>
          <%= docs[d].product_Name %></p></a>
        </td>
        </tr>
    <div id= "sub" class="sub">
        <tr class="sub" id="<%= docs[d]._id %>" >
            <table style="width:100%;font-size: 14px;" align="right" bgcolor="#A0A0A3" >
            <% for(var e=0;e<doc.length;e++)
              {   %>
                 <tr>
                    <td> 
                       <a href=<%= doc[e].url_Address %>><p><%= doc[e].product_Name %></p></a>
                    </td>
                    <td>
                    <p class = "tab"><%= doc[e].vendor_Name %></p>
                    </td>
                 </tr>
          <% } %>
           </table>
        </tr>
    </div>
    <% } %>
    </table>

теперь я хочу, чтобы при нажатии на изображение изображение менялось, а div должен скрываться

Я пытаюсь следовать jquery.

<script>
  function diffImage(img) {
   if(img.src.match("http://olenka.med.virginia")){
        img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
        $(".image1").click(function(){
            $(".sub").hide();
         });
   }else{
        $(".image1").click(function(){
            $(".sub").show();
        });
        img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
        }
    }
</script>

он скрывает div при нажатии на изображение.

но проблема в следующем:

когда я нажимаю на изображение для отображения подтаблицы, оно показывает всю подтаблицу каждой строки, и то же самое при попытке скрыть строку?

Я хочу, чтобы при нажатии на изображение скрывалась только его подтаблица или отображалась не вся подтаблица?


javascript html jquery css ejs
person Shubham Batra    schedule 24.10.2015    source источник
comment
Пожалуйста, попробуйте использовать $(this).next('.sub').hide();   -  person guradio    schedule 24.10.2015
comment
@Pekka может понадобиться для .closest() ... $(this).closest('tr').next('.sub').hide();   -  person Mohamed-Yousef    schedule 24.10.2015
comment
@ Мохамед-Юсеф, спасибо за исправление, я не учел другое, вы правы   -  person guradio    schedule 24.10.2015
comment
Спасибо ребята работает   -  person Shubham Batra    schedule 24.10.2015

Ответы (1)


arrow_upward
2
arrow_downward

Попробуй это:

<script>
  function diffImage(img) {
   if(img.src.match("http://olenka.med.virginia")){
        img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
        $(".image1").click(function(){
            $(this).closest('tr').next('.sub').hide();
         });
   }else{
        $(".image1").click(function(){
            $(this).closest('tr').next('.sub').show();
        });
        img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
        }
    }
</script>
person Jobs    schedule 24.10.2015