單擊表格行以顯示更多信息

Question

我正在嘗試使用jQuery來實現以下功能。

單擊表行時，將顯示表行中的info div，如果單擊另一個表行，則將隱藏當前顯示的任何其他信息元素，並將根據表行顯示新的info div已被點擊。

這個問題是，代碼無法正常工作。 我玩了幾個替代品，但我似乎無法達到預期的效果。

這將成為聯系人頁面的一部分，該表將顯示聯系人列表，單擊聯系人時，您可以查看有關該特定聯系人的更多數據。

請注意：使用表格並不重要，它可以是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> 

Answer 1

首先，你錯過了代碼中的<tr> 。

• div元素不會直接用作tr的子元素

• 必須在td添加div

編輯

• 現在，您可以使用addClass for tr child div元素和removeClass tr siblings child div

這是工作片段，你可以檢查一下。

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

Answer 2

你可以用這種方式達到你的目的： -

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

Answer 3

將缺少的<tr>添加到表后，嘗試使用.is(":visible")來檢查元素是否是視覺

你也不需要使用> in .find("> .info")

以下示例。

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

Answer 4

這是你的代碼的一些問題：

1. 首先，你不能使用div作為tr的直接子。 你需要用td包裝它。
2. 無需運行兩次jquery初始化： $(document).ready(function() { $(function() {

以下是如何執行此操作的示例：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();
    });      
  });

Answer 5

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

Answer 6

你不能直接使用div，但你可以使用它來實現同樣的目的。

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