Search code examples
jqueryhtml-tablehrefmailto

Gather all email address from selected table cells

I'm helping out someone who runs a website...

I've been given an example table for which we can assume I do not have control over the generated html.

The goal is to be able to click some TD rows and email the address of the anchor's href contained within (after clicking a button I also inserted via jQuery). Upon clicking a cell, I highlight the cell yellow (for now).

How do I get the value for the mailto: for highlighted cells after clicking the "Email Selected" button.

$(document).ready(function(){
    $("td").click(function () {
        $(this).css("background", "yellow");
    });
           
    $("body").append("<div align=\"center\"><a class=\"emailAll\" href=\"#\">Email Selected</a></div>");
    $(".emailAll").click(function(){
        alert("clicked");
        alert($("a").parent("font").parent("div").parent( "td" ).val());
        return false;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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, 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 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" nowrap bgcolor="#666666"> <div align="center"></div></td>
      <td width="120" height="22" nowrap bgcolor="#666666"> <div align="center"> 
          <div align="center"></div>
          <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" nowrap bgcolor="#666666"> <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div>
        <div align="center"></div>
        <div align="center"></div>
        <div align="center"></div>
        <div align="center"></div></td>
      <td rowspan="3" 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" nowrap bgcolor="#666666">&nbsp;</td>
      <td width="120" nowrap bgcolor="#666666"> <div align="center"></div>
        <div align="center"></div></td>
      <td width="120" nowrap bgcolor="#666666"> <div align="center"></div></td>
      <td width="120" rowspan="4" nowrap bgcolor="#CCCCCC"> <div align="center"> 
          <div align="center"> 
            <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><a href="mailto:jdoe@somewhere.net">John 
              &amp; Doe</a></font></div>
          </div>
        </div></td>
    </tr>
    <tr> 
      <td width="120" rowspan="3" nowrap bgcolor="#CCCCCC"> <div align="center"> 
          <div align="center"><font size="2" face="Arial, Helvetica, sans-serif">Joan 
            Y.</font></div>
        </div>
        <div align="center"></div>
        <div align="center"></div></td>
      <td width="120" height="22" nowrap bgcolor="#666666">&nbsp;</td>
      <td width="120" rowspan="2" nowrap bgcolor="#CCCCCC"> <div align="center"></div>
        <div align="center"></div>
        <div align="center"></div>
        <div align="center"></div>
        <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div>
        <div align="center"> 
          <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div>
          <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div>
          <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div>
          <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"></font></div>
          <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><a href="mailto:janel@gmail.com">Jane 
            L</a></font></div>
        </div></td>
      <td width="120" nowrap bgcolor="#666666">&nbsp;</td>
    </tr>
    <tr> 
      <td width="120" rowspan="2" nowrap bgcolor="#CCCCCC"> <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><a href="mailto:elmo@yahoo.com">Elmo</a></font></div>
        <div align="center"></div></td>
      <td width="120" rowspan="2" nowrap bgcolor="#CCCCCC"> <div align="center"> 
          <div align="center"></div>
          <a href="mailto:cookie@gmail.com"><font size="2" face="Arial, Helvetica, sans-serif">Cookie</font></a></div></td>
      <td height="22" nowrap>&nbsp;</td>
    </tr>
    <tr> 
      <td width="120" rowspan="4" nowrap bgcolor="#CCCCCC"><div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><a href="mailto:bigbird@hotmail.com">Big 
          &amp; Bird</a></font> </div></td>
      <td height="22" nowrap>&nbsp;</td>
    </tr>
</table>

Solution

  • For getting all possible email targets ( some of the cells are empty or doesn't have a mailto address) You can collect the data with the filter & map functions.

    I made a quick demo and added the option to deselect a cell and a button to clear all:

    Demo: jsFiddle

    The code:

    Select & deselect:

    // Add a click listener to each table cell and toggle state on more clicks:
$("td").click(function () {
    if ($(this).data('chosen'))
        $(this).css("background", $(this).attr("bgcolor")).data('chosen', false);
    else
        $(this).css("background", "yellow").data('chosen', true);
});

    Add buttons:

    // Append the action button and clear all button:
$("body").append("<br /><div><button class=\"emailAll\">Email Selected</button><button class=\"clearAll\">Clear All Selected</button></div>");

    Collect Emails (click event):

    // Collect all email addresses from the selected cells:
$('.emailAll').on('click', function(){
    allSelected = $('td').filter(function(){
           return $(this).data("chosen") === true;
    }).map(function(){
        var target = $(this).find('a').eq(0);
        if ($(target).length && typeof $(target).attr('href') !== 'undefined')
        return  target.attr('href').replace('mailto:','');
    }).get();
    emailAllAction(allSelected);
    /* Debug */
    console.log(allSelected);
});

    Function to execute after collected emails:

    //Function to use all collected emails:
function emailAllAction(allSelected) {
    if (allSelected.length) {
        alert('Will email to: \r' + allSelected.join('\r'));
    } else {
        alert('No Email address found in your selections!');
    }
}

    Clear all button (click event):

    //Clear button:
$('.clearAll').click(function(){
    $("td").each(function(){
        if ($(this).data('chosen')) $(this).trigger('click');
    });
});

    Have Fun.