Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>   
    <title>Datatable drilldown Example</title>
      
      
        <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
      
      
  </head>
​
    <body>
        <div class="container">   
        <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
        <thead>
        <tr>
            <th></th>
            <th>Type</th>
            <th>Variation</th>
            <th>Level</th>
            <th>Lifespan</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>A</td>
            <td>5</td>
            <td>7</td>
            <td>24</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>B</td>
            <td>4</td>
            <td>10</td>
            <td>48</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>C</td>
            <td>3</td>
            <td>2</td>
            <td>36</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>D</td>
            <td>5</td>
            <td>7</td>
            <td>48</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>E</td>
            <td>5</td>
            <td>9</td>
            <td>20</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>F</td>
            <td>3</td>
            <td>7</td>
            <td>40</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>G</td>
            <td>5</td>
            <td>9</td>
            <td>48</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>H</td>
            <td>5</td>
            <td>7</td>
            <td>48</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>I</td>
            <td>4</td>
            <td>7</td>
            <td>28</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>J</td>
            <td>4</td>
            <td>6</td>
            <td>48</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>K</td>
            <td>5</td>
            <td>8</td>
            <td>48</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>L</td>
            <td>4</td>
            <td>5</td>
            <td>24</td>
        </tr>
        <tr>
            <td class= "control center"><img alt="+"></td>
            <td>M</td>
            <td>3</td>
            <td>3</td>
            <td>64</td>
        </tr>
        </tbody>
        </table> 
        </div>
        
        <!--HOW TO SET THIS INNER TABLE WITH TOTALLY DIFFRENT STYLE?-->
        <div class="container" style="display:none;">   
        <table cellpadding="0" cellspacing="0" border="0" class="innerDataTable" id="example1">
        <thead>
        <tr >
            <th>L3Type</th>
            <th>L3Variation</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>A</td>
            <td>5</td>
        </tr>
        <tr>
            <td>B</td>
            <td>4</td>
        </tr>
        </tbody>
        </table> 
        </div>
    </body>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Sevrenpro
0viewers