jqueryを使用した支援グループのhtmlテーブル

基本的には、展開/折りたたみ機能の3つのレイヤーを持つhtmlテーブルがあります。私が達成しようとしているのは、層が実際に拡大/縮小されることです。基本的には拡大されると下向きの傾斜になります。ここに私のJSFiddleです：jqueryを使用した支援グループのhtmlテーブル

このようなものを作成し

https://jsfiddle.net/htfLmekL/1/

//expand collapse based on parent class which is column 1 
$(document).ready(function() { 
    $('.parent').prepend('-'); 

    $('.parent').on('click', function() { 
    if ($(this).text().indexOf('-') != -1) { 
     var str0 = $(this).text().replace(/-/g, '+'); 
     $(this).text(str0); 
    } else { 
     var str = $(this).text().replace(/\+/g, '-'); 
     $(this).text(str); 
    } 
    var $row = $(this).parent(); 
    var rowspan = +$(this).attr('rowspan') || 4; 
    $.merge($row, $row.nextAll()).slice(0, rowspan).find('.alliance').toggle(); 
    $.merge($row, $row.nextAll()).slice(0, rowspan).find('.race').toggle(); 
    $.merge($row, $row.nextAll()).slice(0, rowspan).find('.role').toggle(); 
    $.merge($row, $row.nextAll()).slice(0, rowspan).find('.resource').toggle(); 
    $.merge($row, $row.nextAll()).slice(0, rowspan).find('.weapon').toggle(); 
    $.merge($row, $row.nextAll()).slice(0, rowspan).find('.price').toggle(); 

    }); 
});

出典

2016-06-02 khemikal

...あなたはCSSにそれは完璧な得るために多くのことを微調整する必要がありますけど。これが役に立ちますようお願い致します...

 <style> 
    .tftable { 
    font-size: 12px; 
    color: #333333; 
    width: 100%; 
    border-width: 1px; 
    border-color: #729ea5; 
    border-collapse: collapse; 
} 

.tftable th { 
    font-size: 12px; 
    background-color: #acc8cc; 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #729ea5; 
    text-align: left; 
} 

.tftable tr { 
    background-color: #d4e3e5; 
} 

.tftable td { 
    font-size: 12px; 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #729ea5; 

} 

.tftable tr:hover { 
    background-color: #ffffff; 
} 

.race { 
    width: 50px; 
} 


</style> 

    </head> 
    <body> 








     <table class="tftable" border="1"> 
      <tr> 
       <th>Group</th> 
      </tr> 
      <tr> 
       <th><a onclick="javascript:toggleDiv(this,'grp1child1');"> - </a>Group 1 

        <table id="grp1child1" class="tftable" border="1"> 
         <tr> 
          <th>Alliance : <a onclick="javascript:toggleDiv(this,'grp1child2');"> - </a>Good</th> 
         </tr> 
         <tr> 
          <td > 
           <table id="grp1child2" class="tftable" border="1"> 
            <tr> 
             <th class="race">Race: </th> 
             <th><a onclick="javascript:toggleDiv(this,'grp1child3');" > - </a>Humans</th> 
             <th><a onclick="javascript:toggleDiv(this,'grp1child4');"> - </a>Elves</th> 
            </tr> 
            <tr> 
             <td>&nbsp;</td> 
             <td> 
              <table id="grp1child3" class="tftable" border="1"> 
               <tr> 
                <th colspan="3">&nbsp;</th> 
                <th>Price</th> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 

              </table> 

             </td> 
             <td> 
              <table id="grp1child4" class="tftable" border="1"> 
               <tr> 
                <th colspan="3">&nbsp;</th> 
                <th>Price</th> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 

              </table>         
             </td> 
            </tr>          

           </table>         
          </td> 
         </tr> 



        </table> 

       </th> 
     </tr> 
     <tr> 
       <th><a onclick="javascript:toggleDiv(this,'grp2child1');"> - </a>Group 2 

        <table id="grp2child1" class="tftable" border="1"> 
         <tr> 
          <th >Alliance : <a onclick="javascript:toggleDiv(this,'grp2child2');"> - </a>Evil</th> 
         </tr> 
         <tr> 
          <td> 
           <table id="grp2child2" style="width : 100%"> 
            <tr> 
             <th class="race">Race: </th> 
             <th><a onclick="javascript:toggleDiv(this,'grp2child3');" > - </a>Trolls</th> 
             <th><a onclick="javascript:toggleDiv(this,'grp2child4');"> - </a>Ogres</th> 
            </tr> 
            <tr> 
             <td>&nbsp;</td> 
             <td> 
              <table id="grp2child3" class="tftable" border="1"> 
               <tr> 
                <th colspan="3">&nbsp;</th> 
                <th>Price</th> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 

              </table> 

             </td> 
             <td> 
              <table id="grp2child4" class="tftable" border="1"> 
               <tr> 
                <th colspan="3">&nbsp;</th> 
                <th>Price</th> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 
               <tr> 
                <td></td> 
                <td></td> 
                <td></td> 
                <td></td> 
               </tr> 

              </table>         
             </td> 
            </tr>          

           </table>         
          </td> 
         </tr> 

        </table> 

       </th> 
      </tr> 




     </table> 



<script> 

function toggleDiv(linkobj,divId) { 
    linkobj.innerHTML = (linkobj.innerHTML === ' - ') ? ' + ' : ' - ' ; 
    $("#"+divId).toggle(); 
} 


</script>

出典

2016-06-02 14:11:41

これは本当に私が達成しようとしているものに近いですが、どうすればグループ2を実際にグループ1にすることができますか？基本的に価格ヘッダーを除いてすべてのヘッダーを削除していますか？ – khemikal

@khemikal、edited ...をご確認ください。 –

jqueryを使用した支援グループのhtmlテーブル

答えて

関連する問題