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

Question

我帮助管理网站的人......

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

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

如何获取mailto的值：单击＆＃34; Email Selected＆＃34;按钮。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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 2

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

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

演示： jsFiddle

代码：

选择＆amp;取消选择：

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

使用一个处理程序修改每个单元格上的“Email selected”链接

单个处理程序在单击的单元格上切换.selected类，然后检查是否存在子mailto:链接。如果存在，则将收件人附加到.emailAll链接或从.emailAll链接中删除。现在，$("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 + ','; } }); } }); 链接只是一个普通的“mailto：”链接，其中包含动态更新的收件人列表。

.emailAll

通过这种方式，您可以使用单个事件处理程序控制样式和状态。无需使用JS修改CSS，也无需为过滤表格的$(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>

{{1}}

Answer 4

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

你可以使用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();