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

Question

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

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

目标是能够单击一些 TD 行并通过电子邮件发送其中包含的锚点 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

使用一个处理程序修改每次单击单元格时的“已选择电子邮件”链接

单个处理程序在单击的单元格上切换 .selected 类，然后检查子 mailto: 链接是否存在。如果存在，则将收件人附加到.emailAll 链接或从中删除。现在.emailAll 链接只是一个普通的“mailto:”链接，其中包含动态更新的收件人列表。

$("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').attr('href', function (i, href) {
            if (href.match(recipient)) {
                return $(this).attr('href').replace(recipient + ',', '');
            } else {
                return $(this).attr('href') + recipient + ',';
            }
        });
    }
});

通过这种方式，您可以使用单个事件处理程序来控制样式和状态。无需使用 JS 修改 CSS 或为过滤表格的 .emailAll 链接创建昂贵的第二次点击处理程序。

$(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>');     
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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 2

为了获取所有可能的电子邮件目标（某些单元格为空或没有邮件地址），您可以使用过滤器和映射功能收集数据。

我做了一个快速演示并添加了取消选择单元格的选项和一个按钮以清除所有：

演示： jsFiddle

代码：

选择和取消选择：

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

添加按钮：

// 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 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 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 button:
$('.clearAll').click(function(){
    $("td").each(function(){
        if ($(this).data('chosen')) $(this).trigger('click');
    });
});

玩得开心。

Answer 3

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

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

  });    

});

Answer 4

当您动态附加内容时，您需要使用事件委托将事件附加到动态生成的元素上

您可以使用 jquery 过滤功能仅获取具有黄色背景颜色的 td 元素：

 $("body").on('click','.emailAll',function(){
    alert("clicked");
    var selectedtd = $('td').filter(function(){
     return $(this).css("background")=="yellow";
    });
    return false;
});

用于获取数组中的所有 mailto 值：

$('td').filter(function(){
  return $(this).css("background")=="yellow";
}).map(function(){
  return $(this).find('a').attr('href').replace('mailto:','');
}).get();