在另一個下滑動一行

Question

我試圖找出如何滑動當前由該行下的行來佔據的行，然後顯示更多信息。任何想法，我在做什麼錯誤，因爲現在當我點擊它時，什麼都沒有影響？

我沒有收到任何javascript錯誤。

<table class="table table-bordered table-hover"> 
    <thead> 
     <tr> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th>Action</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td style="width:5px;"> 
       <a id="orderData" class="btn btn-xs"><i class="fa fa-plus-circle fa-2x"></i></a> 
      </td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td colspan="8"><p>Blah blah blah blah blah blah blah blah blah blah blah 
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> 
      </td> 
     </tr>       
    </tbody> 
</table> 

$(function() { 
    $("td[colspan=8]").parent().hide(); 
    $("table").click(function(event) { 
     event.stopPropagation(); 
     var $target = $(event.target); 
     if ($target.closest("td").attr("colspan") > 1) { 
      $target.slideUp(); 
      $target.closest("tr").prev().find("td:first").html("+"); 
     } else { 
      $target.closest("tr").next().find("p").slideToggle(); 
      if ($target.closest("tr").find("td:first").html() == "+") 
       $target.closest("tr").find("td:first").html("-"); 
      else 
       $target.closest("tr").find("td:first").html("+"); 
     } 
    }); 
}); 

Answer 1

試試這個：

$(function() { 
 
    $(".info-toggler").on('click', function(event) { 
 
     $(this).parents("tr").next().toggleClass("hide"); 
 
     $(this).children("i").toggleClass("fa-minus-circle").toggleClass("fa-plus-circle"); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<table class="table table-bordered table-hover"> 
 
    <thead> 
 
<tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th>Action</th> 
 
</tr> 
 
    </thead> 
 
    <tbody> 
 
<tr> 
 
    <td style="width:5px;"> 
 
    <a class="btn btn-xs info-toggler"><i class="fa fa-plus-circle fa-2x"></i></a> 
 
    </td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="info-row hide"> 
 
    <td></td> 
 
    <td colspan="10"> 
 
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> 
 
    </td> 
 
</tr> 
 

 
<tr> 
 
    <td style="width:5px;"> 
 
    <a class="btn btn-xs info-toggler"><i class="fa fa-plus-circle fa-2x"></i></a> 
 
    </td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
<tr class="hide"> 
 
    <td></td> 
 
    <td colspan="10"> 
 
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> 
 
    </td> 
 
</tr> 
 
    </tbody> 
 
</table> 
 

 

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