jquery - 收集选定表格单元格中的所有电子邮件地址

Question

我正在帮助运营网站的人...

我得到了一个示例表，我们可以假设我无法控制生成的 html。

目标是能够单击一些 TD 行并通过电子邮件发送其中包含的 anchor href 的地址(单击我也通过 jQuery 插入的按钮后)。单击某个单元格后，我会将该单元格突出显示为黄色(目前)。

单击“通过电子邮件发送所选内容”按钮后，如何获取突出显示的单元格的 mailto: 值。

$(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>

Answer 1

我 fork 并更新了你的 fiddle 。非电子邮件表格单元格现在被过滤，结果列表将被记录到控制台。

https://jsfiddle.net/tLeymxhk/4/

$(document).ready(function(){

// Add a click listener to each table cell
$('td').click(function () {
    $(this).css('background', 'yellow').data('selected', true);
});

// Append the action button
$('body').append('<div><button class=\'emailAll\'>Email Selected</button>');

// Collect all email addresses from the selected cells
$('.emailAll').on('click', function(){

  var results = $('td')
  .filter(function(){
      // Only keep the ones that got a data-selected flag and a mailto-link
      return $(this).data('selected') && $(this).find('a[href^="mailto:"]').length > 0;
    })
  .map(function(){
      return $(this).find('a').attr('href').replace('mailto:','');
    })
  .get();

    // Output the results                  
    $.each( results, function( index, value ) {
      console.log(index + ': ' + value);
    });

  });    

});