单击表格行以显示更多信息

Question

我正在尝试使用 jQuery 来实现以下目标。

点击表格行时，显示该表格行内的info div，如果点击另一个表格行，则隐藏当前显示的任何其他info元素，并按照新的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> 添加到表后，尝试使用.is(":visible") 检查元素是否为视觉

你也不需要在.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 2

你不能直接使用 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>

Answer 3

首先，您在代码中错过了<tr>。

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

• 必须在td中添加div

编辑

• 现在您可以在这里使用addClass 来表示tr child div 元素和removeClass tr 兄弟姐妹child div

这里正在运行 sn-p 你可以检查一下。

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

你可以用这种方式来达到你的目的：-

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

你的代码有问题：

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 6

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