Clever Geek Handbook

Click a table row to show additional information

I am trying to use jQuery to achieve the following.

enter image description here

Clicking on a table row displays the info div in the table row, and when clicking another table row will hide any other displayed information item and the new information div will be displayed according to the table row that was clicked.

The problem is that the code is not working correctly. I've played around with several alternatives, but I can't seem to achieve the results I want.

This will be part of the contacts page, the table will display a list of contacts, and when the contact is clicked, you will see more details about that particular contact.

PLEASE NOTE: Using the table is not important, it could be the message ul, ol, div ...

$(document).ready(function() {
  $(function() {
    $("tr").click(function() {
      if ($(this).find("> .info").css('display') == 'none') {
        $(this).find("> .info").show();
      } else {
        $(this).find("> .info").hide();
      }
    });
  });
});
      

        
        
        
      

    
.info {
  display: none;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>joebloggs@email.com</td>
    <div class="info">555.555.555</div>
  </tr>
  <tr>
    <td>Sam Doe</td>
    <td>samdoe@email.com</td>
    <div class="info">556.556.556</div>
  </tr>
</table>
Run code


+3


source to share


6 answers


First of all, you miss it <tr>

in your code.

  • div

    the element will not be used directly as a child tr

  • Need to add div

    totd

EDIT

  • Now you can use addClass

    for element tr

    child div

    and removeClass

    tr

    siblingschild div



Here is a working snippet you can check.

$(document).ready(function(){
      $("tr").click(function() {
          $(this).find("div[class*='info']").addClass('show');
          $(this).siblings().find("div[class*='info']").removeClass('show');
      });
});
      

        
        
        
      

    
.info {
  display: none;
}
.show {
  display: block;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>joebloggs@email.com</td>
    <td><div class="info">555.555.555</div></td>
  </tr>
  <tr>
    <td>Sam Doe</td>
    <td>samdoe@email.com</td>
    <td><div class="info">556.556.556</div></td>
  </tr>
</table>
Run code


+1


source


You can use this way to achieve your goal: -



$(document).ready(function() {
  $('tr').click(function() {
    $(this).next('.more-info').slideToggle('slow');
  });
});
      

        
        
        
      

    
table {
  border: solid 1px #000;
  border-collapse: collapse;
  width: 100%;
}

table th,
table td {
  border: solid 1px #000;
}

.more-info {
  display: none;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>column</td>
      <td>column</td>
      <td>column</td>
    </tr>
    <tr class="more-info">
      <td colspan="3">More Info</td>
    </tr>
  </tbody>
</table>
Run code


+1


source


After adding the missing <tr>

to your table, try using .is(":visible")

to check if the item is a vision

You also don't need to use >

in.find("> .info")

See example below.

$(document).ready(function() {
  $(function() {
    $("tr").click(function() {
      if (!$(this).find(".info").is(":visible")) {
        $(this).find(".info").show();
      } else {
        $(this).find(".info").hide();
      }
    });
  });
});
      

        
        
        
      

    
.info {
  display: none;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>joebloggs@email.com</td>
    <td>
      <div class="info">555.555.555</div>
    </td>
  </tr>
  <tr>
    <td>Sam Doe</td>
    <td>samdoe@email.com</td>
    <td>
      <div class="info">556.556.556</div>
    </td>
  </tr>
</table>
Run code


0


source


These are some of the problems with your code:

  • First of all, you cannot use div as a direct child of tr. You need to wrap it with td.
  • No need to run jquery initialization twice: $(document).ready(function() { $(function() {

Here's an example of how you can do it: HTML:

<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>joebloggs@email.com</td>
    </tr>
    <tr class="info">
      <td collspan="2"><div>555.555.555</div></td>
    </tr> 
    <tr>
    <td>Sam Doe</td>
    <td>samdoe@email.com</td>    
    </tr>
    <tr class="info">
      <td colspan="2">
          <div>556.556.556</div>
      </td>
    </tr>
</table>

JS:

$(function() {
    $('tr').not('.info').on('click', function() {
        $('.info').hide();
      $(this).next('.info').show();
    });      
  });
0


source 


$("tr").on("click", function(){
  if ($(this).find(".info").css('display') == 'none') 
   {
       $(this).find(".info").show();
   } else 
   {
       $(this).find(".info").hide();
   }

});
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
.info {
  display: none;
}
</style>


<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>joebloggs@email.com
       <div class="info">555.555.555</div>
    </td>
  </tr>
  <tr>
     <td>Sam Doe</td>
    <td>samdoe@email.com
      <div class="info">556.556.556</div>
    </td>
  </tr>
</table>
Run code


0


source


You cannot use a div directly, but you can achieve the same using this.

$(document).ready(function(){
  $(function() {
      $("tr").click(function() {
      $('tr.visible').removeClass('visible').addClass('info'); $(this).next('tr').addClass('visible').removeClass('info');          
      });
  });
});
      

        
        
        
      

    
.info {
  display: none;
}

.visible {
  display: inline-block;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>joebloggs@email.com</td>
    
  </tr>
  <tr class="info"><td colspan="2"><div>555.555.555</div></td></tr>
  <tr>
    <td>Sam Doe</td>
    <td>samdoe@email.com</td>
       <div class="info">556.556.556</div>
    </tr>
    <tr class="info"><td colspan="2"><div>556.556.556</div></td></tr>
</table>
Run code


0


source






More articles:


All Articles