隐藏/显示后切换表

Question

我有这张桌子

$("tr.child-2479").hide(1000);

$("tr.parent > td").on("click", "span.btn", function() {
    var childId = $(this).parents("tr").prop("id");
    $(".child-" + childId).toggle("slow");
});

body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid #ddd;
    padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #ddd;}
th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;}
    .btn{
      color:blue;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<colgroup><col><col><col><col><col></colgroup>
<tbody><tr><th>K</th><th>VM</th><th>RAM</th><th>Co</th><th>Sto</th></tr>
<tr  class="parent" id="2479"><td><span class="btn">Prime</span></td><td>DESK</td><td>8</td><td>4</td><td>151</td></tr>

<tr class="child-2479"><td>Prime</td><td>SP</td><td>61</td><td>2</td><td>60</td></tr>
<tr class="child-2479"><td>Prime</td><td>DC</td><td>1</td><td>1</td><td>450</td></tr>
<tr class="child-2479"><td>Prime</td><td>MS</td><td>8</td><td>4</td><td>160</td></tr>
<tr class="child-2479"><td>Prime</td><td>SP</td><td>1</td><td>4</td><td>121</td></tr>
<tr><td>Inhost</td><td>No</td><td>4</td><td>2</td><td>80</td></tr>
<tr><td>Inhost</td><td>fw</td><td>1</td><td>1</td><td>8</td></tr>
<tr><td>Inhost</td><td>NO</td><td>40</td><td>1</td><td>1</td></tr>
<tr><td>Inhost</td><td>web</td><td>20</td><td>2</td><td>5</td></tr>
</tbody></table>

我正在尝试隐藏到具有相同名称的行，然后我尝试在点击事件上再次显示它。但看起来，我做错了什么:(有人可以帮我。谢谢。

Answer 1

只需替换这行代码：

$("tr.child-2479 > td").hide(1000);

到

$("tr.child-2479").hide(1000);

的段：

$(document).ready(function() {
    $("tr.child-2479").hide(1000);

    $("tr.parent > td").on("click", "span.btn", function() {
        var childId = $(this).parents("tr").prop("id");
        $(".child-" + childId).toggle("slow");
    });
});

body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td,
th {
    border: 1px solid #ddd;
    padding: 8px;
}
tr:nth-child(even) {
    background-color: #f2f2f2;
}
tr:hover {
    background-color: #ddd;
}
th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
.btn {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <colgroup>
    <col>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <tbody>
    <tr>
      <th>K</th>
      <th>VM</th>
      <th>RAM</th>
      <th>Co</th>
      <th>Sto</th>
    </tr>
    <tr  class="parent" id="2479">
      <td><span class="btn">Prime</span></td>
      <td>DESK</td>
      <td>8</td>
      <td>4</td>
      <td>151</td>
    </tr>
    <tr class="child-2479">
      <td>Prime</td>
      <td>SP</td>
      <td>61</td>
      <td>2</td>
      <td>60</td>
    </tr>
    <tr class="child-2479">
      <td>Prime</td>
      <td>DC</td>
      <td>1</td>
      <td>1</td>
      <td>450</td>
    </tr>
    <tr class="child-2479">
      <td>Prime</td>
      <td>MS</td>
      <td>8</td>
      <td>4</td>
      <td>160</td>
    </tr>
    <tr class="child-2479">
      <td>Prime</td>
      <td>SP</td>
      <td>1</td>
      <td>4</td>
      <td>121</td>
    </tr>
    <tr>
      <td>Inhost</td>
      <td>No</td>
      <td>4</td>
      <td>2</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Inhost</td>
      <td>fw</td>
      <td>1</td>
      <td>1</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Inhost</td>
      <td>NO</td>
      <td>40</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Inhost</td>
      <td>web</td>
      <td>20</td>
      <td>2</td>
      <td>5</td>
    </tr>
  </tbody>
</table>