グループHTMLテーブルの行拡張し、崩壊ボタン

-1

と、リンクグループHTMLテーブルの行拡張し、崩壊ボタン

Current table

以下のように私は、カテゴリやSKUでの販売データを含むHTMLテーブルを持っているしかし、私はリンクの下に示すように達成したいです

Expected Table View jqueryのプラグインは何ですか？あなたはこのコードを実装することができます

出典

2017-07-30 Muhammad Tarique

を助けてください：ここ

参照のデモ：https://output.jsbin.com/ticumux#

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 
<title>JS Bin</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<style> 
.cat-plus { 
    background-image:url("../images/plus.png"); 
    background-repeat:no-repeat; background-position:-15px center; 
    border-left: 20px solid green; 
}  
.cat-minus { 
    background-image:url("../images/minus.png"); 
    background-repeat:no-repeat; 
    background-position:-15px center; 
    border-left: 20px solid red; 
} 
</style> 

<script> 
    $(document).ready(function(){ 
     $(".toggler").click(function(e){ 
      e.preventDefault(); 
      //the data stored in the data-prod-cat 
      var prodCat = ($(this).attr("data-prod-cat")); 
      //toggle the link clicked on 
      $(".cat" + prodCat).toggle(); 
      //select the parent and find the span so you can 
      //toggle the "cat-plus" class 
      $(this).parent().find("span").toggleClass("cat-plus"); 
      //toggle the cat-minus class 
      $(this).toggleClass("cat-minus"); 
     }); 
    }); 
</script> 

</head> 
<body> 

<table> 
    <thead> 
    <tr> 
     <th>Category</th> 
     <th>SKU</th> 
     <th>Description</th> 
     <th>jul-30</th> 
     <th>jul-29</th> 
     <th>jul-28</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Napkin</td> 
     <td></td> 
     <td></td> 
     <td>32</td> 
     <td>54</td> 
     <td>54</td> 
    </tr> 
    <tr> 
     <td><a href="#" class="toggler" data-prod-cat="1"><span class="cat-plus">+</span></a> Table Runner</td> 
     <td></td> 
     <td></td> 
     <td>43</td> 
     <td>76</td> 
     <td>54</td> 
    </tr> 
    <tr class="cat1" style="display:none"> 
     <td></td> 
     <td>ABC Here</td> 
     <td>2234</td> 
     <td>43</td> 
     <td>76</td> 
     <td>54</td> 
    </tr> 
    <tr class="cat1" style="display:none"> 
     <td></td> 
     <td>ABC Here</td> 
     <td>2234</td> 
     <td>43</td> 
     <td>76</td> 
     <td>54</td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

出典

2017-07-30 17:39:37

おかげ@CKGしかし、誰expnad /またナプキンのためoptionn折りたたむ総販売数量合計が作業していないではありません –

グループHTMLテーブルの行拡張し、崩壊ボタン

答えて

関連する問題