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

Question

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

有人给了我一个例子 table 我们可以假设 我无法控制生成的 html 。

目标是能够单击一些 TD 行并通过电子邮件发送其中包含的锚点 href 地址（在单击我也通过 jQuery 插入的按钮后）。单击一个单元格后，我将单元格突出显示为黄色（暂时）。

单击 "Email Selected" 按钮后如何获取 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

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

并且您可以使用 jquery 过滤功能仅获取具有 css 背景颜色黄色的 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();

Answer 2

我分叉并更新了你的fiddle。非电子邮件 table-cells 现在被过滤，结果列表将被记录到控制台。

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 3

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

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

演示： jsFiddle

代码：

Select & 取消选择：

// 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 4

在每个单元格单击时使用一个处理程序修改 "Email selected" link

单个处理程序在单击的单元格上切换 .selected class，然后检查是否存在子 mailto: link。如果存在，收件人将附加到 .emailAll link 或从中删除。现在 .emailAll link 只是一个普通的 "mailto:" link，带有动态更新的收件人列表。

$("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 或为过滤 table.

的 .emailAll link 创建昂贵的第二次点击处理程序

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

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

Gather all email address from selected table cells

mailto

jquery

html-table

href

在每个单元格单击时使用一个处理程序修改 "Email selected" link