parentGroup

parentingGrouping

HTML

<table>
  <thead>
    <th>parent</th>
    <th>child0</th>
    <th>child1</th>
  </thead>
  <tbody>
    <tr>
      <td class="parent" rowspan="3">Orc Parent</td>
      <td class="child0">Warrior</td>
      <td class="child1">Sword</td>
    </tr>
    <tr>
      <td class="parent" rowspan="3">Orc</td>
      <td class="child0">Warrior</td>
      <td class="child1">Sword</td>
    </tr>
    <tr>
      <td class="child0">Defiler</td>
      <td class="child1">Mace</td>
    </tr>
    <tr>
      <td class="child0">Warlock</td>
      <td class="child1">Wand</td>
    </tr>
  </tbody>
</table>

CSS

td {
  border: solid;
}

JavaScript

$(function() {
  $('.parent').on('click', function() {
    var rowspan0 = parseInt($(this).attr('rowspan'));
    $(this).attr('rowspan', rowspan0 + 1);

    var row = $('<tr></tr>');
    row.html($(this).closest('td').detach().text());
    $('tbody').prepend(row);

    // $(this).attr('rowspan').size() + 1;
  });
});