Jquery expand折りたたみスパンのクリックでテーブルの次の行

Question

私は+と-のアイテムを展開したり折りたたんだりしています。特定の行の横にあるこのアイコン行のOnclickが展開されます。私はjqueryを介してcollpasible Iconを動的に追加しています。これらのアイコンをクリックすると、どのようにして次の行に動的にアクセスできますか。理想的にはそののクリックで

- 事前に行を非表示にする拡張され、それが示されるべき+のonclickのアイコン..おかげ

$(document).ready(function() { 
 
    $(".table tbody tr.has-history td:first-child").append('<span class="collapse-icon"></span>'); 
 
});

.table tbody tr.has-history > td:first-child { 
 
    position: relative; 
 
} 
 
.table tbody tr.has-history span.collapse-icon { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    color: white; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    left: -20px; 
 
    background: #f09d18; 
 
    border-radius: 5px 0 0 5px; 
 
    cursor: pointer; 
 
    font-size: 1.5em; 
 
    line-height: 1em; 
 
} 
 
.table tbody tr.has-history span.collapse-icon:before { 
 
    content: "+"; 
 
} 
 
.table tbody tr.has-history.open span.collapse-icon { 
 
    background: #eee; 
 
    color: #000; 
 
    border: 1px solid #ccc; 
 
} 
 
.table tbody tr.has-history.open span.collapse-icon:before { 
 
    content: "-"; 
 
} 
 
.table{ 
 
MARGIN-LEFT:40px; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table class="table"> 
 
    <thead> 
 
     <tr> 
 
      <th>Product</th> 
 
      <th>Config</th> 
 
      <th>Version</th> 
 
      <th>Status</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="has-history open"> 
 
      <td><a href="#">MSM8992</a></td> 
 
      <td>Estel</td> 
 
      <td>2</td> 
 
      <td>Active</td> 
 
     </tr> 
 
     <tr class="expanded"> 
 
      <td colspan="4"> 
 
       <table class="table" > 
 
        <thead> 
 
         <tr> 
 
          <th>Product</th> 
 
          <th>Config</th> 
 
          <th>Version</th> 
 
          <th>Status</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 

 
         <tr> 
 
          <td><a href="#">MSM8994</a></td> 
 
          <td>Elessar</td> 
 
          <td>1</td> 
 
          <td>Active</td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><a href="#">MSM8994</a></td> 
 
      <td>Elessar</td> 
 
      <td>1</td> 
 
      <td>Active</td> 
 
     </tr> 
 
     <tr> 
 
      <td><a href="#">APQ8084</a></td> 
 
      <td>Gandalf - PoP Memory</td> 
 
      <td>1</td> 
 
      <td>Active</td> 
 
     </tr> 
 
     <tr class="has-history"> 
 
      <td><a href="#">MDM9x40</a></td> 
 
      <td>Tesla</td> 
 
      <td>3</td> 
 
      <td>Active</td> 
 
     </tr> 
 
     <tr> 
 
      <td><a href="#">MDM9x45</a></td> 
 
      <td>Spark</td> 
 
      <td>1</td> 
 
      <td>Active</td> 
 
     </tr> 
 
     <tr class="has-history"> 
 
      <td><a href="#">APQ8084</a></td> 
 
      <td>Gandalf - External Memory</td> 
 
      <td>1</td> 
 
      <td>Active</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 1

バインドクリックイベントを使用して、次の行を取得しますこのJSFiddle https://jsfiddle.net/k6kn972b/

Answer 2

バインドクリックイベント委任を使用するイベント

ターゲット

$(document).on("click", ".collapse-icon", function() { 
$(this).parents(".has-history").next().slideToggle(); 
$(this).parents(".has-history").toggleClass("open"); 
}); 

参照してください$(this).closest("tr")

を使用して、現在の行は、次にクリックで崩壊アイコンクラスに

トグル次の行とアイコンを.next()

$(document).on("click", ".collapse-icon", function() { 
    $(this).closest("tr").next().slideToggle(); 
});