Before

After

<!--
************************************
Calendar Event Signups - Rift
-= Add character Level & Class =-
************************************ -->
<style type="text/css">
th.header {
 color: #fff;
 background: #354250 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/sort-white.gif) left center no-repeat;
 cursor: pointer;
 font-weight: bold;
 text-align: center;
 padding-left: 10px;
 border-right: 1px solid #000;
}
th.headerSortUp { background: #400000 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/asc-white.gif) left center no-repeat; }
th.headerSortDown { background: #804000 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/desc-white.gif) left center no-repeat; }
.hide {display:none;}
</style>
<div id="tmproster" style="display:none"></div>
<script type="text/javascript" src="http://www.guildportal.com/Cms/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
var rosterPage = 'http://guildportal.com/... myGuildRosterPage';
var addIcons = true;
var hideRole = false;
var hideSignedUp = false;
var iconWidth = 24;
var iconHeight = 24;
var isUnknown = '?'; // if unknown, this is added to the spot

// ***************************
// Don't change anything below
// ***************************
// add containsExact selector
$.extend($.expr[':'],{
 containsExact: function(a,i,m){
  return $.trim(a.innerHTML.toLowerCase()) === m[3].toLowerCase();
 }
});
$(document).ready(function(){
 rosterPage = rosterPage.substring(rosterPage.lastIndexOf('/Guild.aspx'),rosterPage.length);
 $('#tmproster').load(rosterPage + ' #tblDumpRosterRift',updateClass);
 if (hideRole) {
  // hide Role selector during signup
  $('select[id*="ddlCharacterRole"]').hide()
  .closest('table').find('td:contains("Role Being Filled")').empty();
 }
});
function updateClass(){
 var gp,cn,cls,loc,lvl, t = '',
  tmproster = $('#tmproster'),
  signups = $('div[id*="_signupsHolder"] table'),
  bxtitle = signups.find('tr:first'),
  trow = '<div class="ContentBoxTitle"><td>' + bxtitle.html() + '</div>';
  bxtitle.remove();
 // adjust table to make tablesorter work
 signups
  .before(trow)  // move title row
  .find('tbody').before('<thead></thead>')
  .find('tr:eq(0)').find('td').each(function(){
   cn = $(this).text();
   t += ( cn == '' ) ? '<td></td>' : '<th>' + cn + '</th>';
  }).end().remove();
 signups
  .find('thead').append('<tr>' + t + '</tr>').end()
  // add new columns
  .find('tr').each(function(){
   $(this).find('td:eq(1)')
   .before('<td class="cclass" valign="middle" align="center"></td>')
   .after('<td class="clvl" align="center"></td>');
  }).end()
  // Add header info
  .find('thead th:eq(1)')
   .before('<th class="cclass">Class</th>')
   .after('<th class="clvl">Level</th>');
  if (hideRole) { signups.find('thead').find('th:eq(4)').hide(); }
  if (hideSignedUp) { signups.find('thead').find('th:eq(5)').hide(); }
  // disable hover over rows, because it changes depending on sort
//  signups.find('.NormGridRow, .AltGridRow').unbind('mouseover mouseout');

 tmproster.find('td:nth-child(2)').each(function(){
  $(this).prepend('<span class="riftnames">' + $.trim($(this).text()) + '</span>');
 });

  // Add info to signups
 signups.find('.NormGridRow,.AltGridRow').each(function(){
  gp = $(this).find('td:eq(0) a').text();
  cn = $(this).find('td:eq(0) span > span').text().replace(/(\s\(as\s|\))/g,''); // remove (as ...)
  cn = (cn === '') ? gp : cn; // if cn = gp then it's not added "(as ...)"
  loc = tmproster.find('.riftnames:containsExact("' + cn + '")').parent().parent();
  lvl = (loc.length) ? loc.find('td:eq(2)').text() : isUnknown;
  cn = loc.find('td:eq(3)').text();
  if (addIcons) {
   cls = (loc.length) ? loc.find('td:eq(0)').html() + '<span style="display:none">' + cn + '</span>' : '';
   $(this).find('.cclass').html(cls).find('img').attr({'width':iconWidth,'height':iconHeight});
  } else {
   cls = (loc.length) ? cn : isUnknown;
   $(this).find('td:eq(1)').append(' <span class="loClass">' + cls + '</span>');
  }
  $(this).find('.clvl').html(lvl);
  if (hideRole) { $(this).find('td:eq(4)').hide(); }
  if (hideSignedUp) { $(this).find('td:eq(5)').hide(); }
 });
 signups.tablesorter({
  textExtraction: function(node) {
   return $(node).text();
  },
  sortList: [[2,0],[4,0]],
  widgets: ['zebra'],
  widgetZebra: {css: ["NormGridRow","AltGridRow"]}
 });
};
</script>

• You must replace the "rosterPage" variable to point to your guild site's roster page (replace the URL in orange)
  
  var rosterPage = 'http://guildportal.com/... myGuildRosterPage';


• Choose to include icons in the signup by setting the "addIcons" variable to true. If false, it will display the class as text.
  
  var addIcons = true;


• If using icons, you can set their height and width with the "iconWidth" and "iconHeight" variables.
  
  var iconWidth = 24;
  var iconHeight = 24;


• It really shouldn't be necessary to use the CSS classes I added, but if you want to adjust the background color or size of those columns or text, you can add the following classes to your stylesheet:
  
  .cclass {  }  /* character class (icon wrapper) */
  .loClass { } /* class text (includes parenthesis) */
  .clvl { }       /* character level text */