grouping table

jquery grouping table

HTML

<table class="tftable" border="1">
  <tr>
    <th>Group</th>
    <th>Alliance</th>
    <th>Race</th>
    <th>Role</th>
    <th>Resource</th>
    <th>Weapon</th>
    <th>Price</th>
  </tr>
  <tr>
    <td class="parent" rowspan="5">Group 1</td>
    <td class="alliance" rowspan="5">Good</td>
    <td class="race" rowspan="3">Humans</td>
    <td class="role">Warrior</td>
    <td class="resource">Steel</td>
    <td class="weapon">Broad Sword</td>
    <td class="price">500</td>
  </tr>
  <tr>
    <td class="role">Warrior</td>
    <td class="resource">Steel</td>
    <td class="weapon">Long Sword</td>
    <td class="price">250</td>
  </tr>
  <tr>
    <td class="role">Mage</td>
    <td class="resource">Cobalt</td>
    <td class="weapon">Staff</td>
    <td class="price">800</td>
  </tr>
  <tr>
    <td class="race" rowspan="2">Elves</td>
    <td class="role">Archer</td>
    <td class="resource">Steel</td>
    <td class="weapon">Long Bow</td>
    <td class="price">650</td>
  </tr>
  <tr>
    <td class="role">Healer</td>
    <td class="resource">Cobalt</td>
    <td class="weapon">Scepter</td>
    <td class="price">200</td>
  </tr>
  <tr>
    <td class="parent" rowspan="5">Group 2</td>
    <td class="alliance" rowspan="5">Evil</td>
    <td class="race" rowspan="3">Trolls</td>
    <td class="role">Berserker</td>
    <td class="resource">Steel</td>
    <td class="weapon">Broad Sword</td>
    <td class="price">1000</td>
  </tr>
  <tr>
    <td class="role">Berserker</td>
    <td class="resource">Cobalt</td>
    <td class="weapon">Broad Sword</td>
    <td class="price">800</td>
  </tr>
  <tr>
    <td class="role">Defiler</td>
    <td class="resource">Steel</td>
    <td class="weapon">Scepter</td>
    <td class="price">375</td>
  </tr>
  <tr>
    <td class="race" rowspan="2">Ogres</td>
    <td class="role">Juggernaught</td>
    <td class="resource">Steel</td>
    <td class="weapon">Axe</td>
    <td class="price">1250</td>
  </tr>
  <tr>
    <td class="role">Warlock</td>
    <td...

CSS

.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;
}

JavaScript

//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();

  });
});
$(document).ready(function() {
  $('.alliance').prepend('-');

  $('.alliance').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') || 1;
    $.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();

  });
});
$(document).ready(function() {
  $('.race').prepend('-');

  $('.race').on('click', function() {
    if ($(this).text().indexOf('-') != -1) {
      var str0 = $(this).text().replace(/-/g, '+');
      $(this).text(str0);
    } else {
      var str =...