Sort table with sub-rows

by wayneye

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.4/js/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="tb" class="table tablesorter" border="1">
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td>
        <button type="button" data-toggle="collapse" data-target="#A-child-1, #A-child-2"><span class="expand-toggle">&gt;</span></button>
        <span>Node A</span>
      </td>
      <td>A</td>
      <td>A</td>
    </tr>
    <tr id="A-child-1" class="collapse">
      <td>
        <span>A child 1</span>
      </td>
      <td>A1</td>
      <td>A1</td>
    </tr>
    <tr id="A-child-2" class="collapse">
      <td>
        <span>A child 2</span>
      </td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>
        <button type="button" data-toggle="collapse" data-target="#B-child-1, #B-child-2"><span class="expand-toggle">&gt;</span></button>
        <span>Node B</span>
      </td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr id="B-child-1" class="collapse">
      <td>
        <span>B child 1</span>
      </td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr id="B-child-2" class="collapse">
      <td>
        <span>B child 2</span>
      </td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>  
    </tbody>
    
  </table>

JavaScript

$(document).ready(function() {
	$("#tb").tablesorter();
})