Itslearning Itslearning - 1 month ago 13
HTML Question

Toggling table after hide/show

I have this table



$("tr.child-2479 > td").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>





I am trying the hide to rows which has same name and then i am trying to show it again on click events. But its look like , I am doing something wrong:( Would anyone could help me. Thank you.

Answer

Just replace this line of code:

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

to

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

Snippet:

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

Comments