如何在可折叠的表格行下方添加一个div？

Question

我正在做一个大厅。大厅将包含游戏列表。显示在<table>。每个<tr> 都包含<td> 中的名称、玩家数量等。现在我希望当我单击该行时应显示游戏的相应详细信息。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<button class="btn btn-primary">Button</button>

<table class="table text-align=">
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
  
    <tr data-toggle="collapse" data-target="#game-1">
      <td>Game 1</td>
      <div class="collapse" id="game-1">Description of game 2</div>
    </tr>

    <tr data-toggle="collapse" data-target="#game-2">
      <td>Game 2</td>
      <div class="collapse" id="game-2">Description of game 2</div>
    </tr>
    
  </tbody>
</table>

我尝试在<tr> 中使用<div>。但这并没有很好地工作，并且它在表格之外显示了细节。

• 我想让详细信息显示在行之后。
• 我的第二个问题是，一次只显示一个细节的最佳方式是什么。

注意：我知道我可以在该行之后添加另一行，但这会破坏我的表格结构。所以我不想那样做。

Answer 1

这是基于您的代码的简单实现：

$(function() {
    $('.collapse-item').click(function(e) {
        e.preventDefault();
        
        const target = $(this).data('target');
        
        if (!$(target).hasClass('show')) {
            $('.collapse-content').removeClass('show');
        }
        
        $(target).toggleClass('show');
    });
});

.table .collapse-content > td {
    padding: 0 .75rem;
}
.collapse-content > td > div {
    height: 0;
    opacity: 0;
}
.table .collapse-content.show > td {
    padding: .75rem;
}
.collapse-content.show > td > div {
    height: 100px;
    opacity: 1;
}
.collapse-content > td, .collapse-content > td > div  {
    -webkit-transition: all 1s ease;
    -moz-transition: all ease-in-out;
    transition: all 1s ease-in-out;
}
.collapse-content.show > td, .collapse-content.show > td > div {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
      
<button class="btn btn-primary">Button</button>

<table class="table text-align">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr class="collapse-item" data-target="#game-1">
            <td>Game 1</td>
        </tr>

        <tr class="collapse-content" id="game-1">
            <td>
                <div>Description of game 1</div>
            </td>
        </tr>

        <tr class="collapse-item" data-target="#game-2">
            <td>Game 2</td>
        </tr>

        <tr class="collapse-content" id="game-2">
            <td>
                <div>Description of game 2</div>
            </td>
        </tr>

    </tbody>
</table>

或者，您可以使用Bootstrap accoridon：

#accordion {
    margin: 2rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
 
 <div id="accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Game #1
                </button>
            </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                Game 1 details
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Game #2
                </button>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
                Game 2 details
            </div>
        </div>
    </div>
</div>

您也可以查看Datatables child rows。这里是sliding example。