Multi-select table that updates link URL

by Gerald Fullam

HTML

<table border="0" align="left">
    <tr> 
      <td width="120" height="46" nowrap bgcolor="#999999"> <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><strong>MONDAY</strong></font></div>
        <div align="center"></div></td>
      <td width="120" height="46" nowrap bgcolor="#999999"> <div align="center"><strong><font size="2" face="Arial, Helvetica, sans-serif">TUESDAY</font></strong></div>
        <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div></td>
      <td width="120" height="46" nowrap bgcolor="#999999"> <div align="center"><strong><font size="2" face="Arial, Helvetica, sans-serif">WEDNESDAY</font></strong></div>
        <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div></td>
      <td width="120" height="46" nowrap bgcolor="#999999"> <div align="center"><strong><font size="2" face="Arial, Helvetica, sans-serif">THURSDAY</font></strong></div>
        <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div></td>
      <td width="120" height="46" nowrap bgcolor="#999999"> <div align="center"><strong><font size="2" face="Arial, Helvetica, sans-serif">FRIDAY</font></strong></div>
        <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div></td>
      <td nowrap>&nbsp;</td>
    </tr>
    <tr> 
      <td width="120" height="22" nowrap bgcolor="#666666"> <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><font face="Arial, Helvetica, sans-serif"><font size="2"></font></font></font></div></td>
      <td width="120" height="22" nowrap bgcolor="#666666"> <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div></td>
      <td width="120" height="22" nowrap bgcolor="#666666"> <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div></td>
      <td width="120" height="22" nowrap bgcolor="#666666"> <div align="center"><font size="2" face="Arial,...

CSS

.selected {
    background-color: yellow;
}
.emailAll {
    clear: both;
    padding: 1em;
    text-align: center;
}

JavaScript

$(document).ready(function () {
    $('td').click(function () {
        var $el = $(this);
        $el.toggleClass('selected');
        if ($el.has('a[href^="mailto:"]').length) {
            var recipient = $el.find('a').attr('href').replace('mailto:','');
            $('.emailAll a').attr('href', function (i, href) {
                if (href.match(recipient)) {
                    return $(this).attr('href').replace(recipient + ',', '');
                } else {
                    return $(this).attr('href') + recipient + ',';
                }
            });
        }
    });
    $('body').append('<div class="emailAll"><a href="mailto:">Email Selected</a></div>');     
});