javascript - Click table row to show more information - Stack Overflow

admin管理员组

文章数量:1317572

I'm trying to use jQuery to achieve the following.

When a table row is clicked, the info div within the table row is displayed, and if another table row is clicked, any other info element that is currently displayed will be hidden, and the new info div will be displayed according to the table row that has been clicked.

This problem is, the code isn't working correctly. I've played around with several alternatives but I can't seem to achieve the desired results.

This is going to be part of a contacts page, the table will show a list of contacts, and when a contact is clicked, you can see more data about that specific contact.

PLEASE NOTE: Using a table is not important, it can be a ul, ol, div.. anything.

$(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=".1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>[email protected]</td>
    <div class="info">555.555.555</div>
  </tr>
  <tr>
    <td>Sam Doe</td>
    <td>[email protected]</td>
    <div class="info">556.556.556</div>
  </tr>
</table>

I'm trying to use jQuery to achieve the following.

When a table row is clicked, the info div within the table row is displayed, and if another table row is clicked, any other info element that is currently displayed will be hidden, and the new info div will be displayed according to the table row that has been clicked.

This problem is, the code isn't working correctly. I've played around with several alternatives but I can't seem to achieve the desired results.

This is going to be part of a contacts page, the table will show a list of contacts, and when a contact is clicked, you can see more data about that specific contact.

PLEASE NOTE: Using a table is not important, it can be a ul, ol, div.. anything.

$(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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>[email protected]</td>
    <div class="info">555.555.555</div>
  </tr>
  <tr>
    <td>Sam Doe</td>
    <td>[email protected]</td>
    <div class="info">556.556.556</div>
  </tr>
</table>

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 21, 2017 at 12:14 Jake Duncan asked Jul 21, 2017 at 10:35 Jake DuncanJake Duncan 7111 silver badge88 bronze badges 3

• whats exactly your question/or where you are stuck? I could'nt understand your problem exactly – Nagaraju Commented Jul 21, 2017 at 10:37
• Your html code is not value, please take your time and fix it, you have 1 tr and 2 /tr – Carsten Løvbo Andersen Commented Jul 21, 2017 at 10:38
• 1 You have a missing <tr> tag just before the <td> of Sam Doe – NewToJS Commented Jul 21, 2017 at 10:39

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

After adding the missing <tr> to your table, try use .is(":visible") to check if the element is vision

You also dont need to use > in .find("> .info")

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>[email protected]</td>
    <td>
      <div class="info">555.555.555</div>
    </td>
  </tr>
  <tr>
    <td>Sam Doe</td>
    <td>[email protected]</td>
    <td>
      <div class="info">556.556.556</div>
    </td>
  </tr>
</table>

You can not use div directly, but you can achive same thing 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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>[email protected]</td>
    
  </tr>
  <tr class="info"><td colspan="2"><div>555.555.555</div></td></tr>
  <tr>
    <td>Sam Doe</td>
    <td>[email protected]</td>
       <div class="info">556.556.556</div>
    </tr>
    <tr class="info"><td colspan="2"><div>556.556.556</div></td></tr>
</table>

First of all you miss <tr> in your code.

• div element will not use directly as a child of tr

• Have to add div in td

EDIT

• Now here you can use addClass for tr child div element and removeClass tr siblings child div

Here is working snippet you can check this.

$(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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>[email protected]</td>
    <td><div class="info">555.555.555</div></td>
  </tr>
  <tr>
    <td>Sam Doe</td>
    <td>[email protected]</td>
    <td><div class="info">556.556.556</div></td>
  </tr>
</table>

You can use this way to achieve your purpose:-

$(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./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>

It's some problems with your code:

1. First of all you can not use div as direct child of tr. You need to wrap it with td.
2. No need to run jquery initialization twice: $(document).ready(function() { $(function() {

Here is example how you can do it: HTML:

<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>[email protected]</td>
    </tr>
    <tr class="info">
      <td collspan="2"><div>555.555.555</div></td>
    </tr> 
    <tr>
    <td>Sam Doe</td>
    <td>[email protected]</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();
    });      
  });

$("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./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
.info {
  display: none;
}
</style>


<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>[email protected]
       <div class="info">555.555.555</div>
    </td>
  </tr>
  <tr>
     <td>Sam Doe</td>
    <td>[email protected]
      <div class="info">556.556.556</div>
    </td>
  </tr>
</table>

本文标签： javascriptClick table row to show more informationStack Overflow