使用輸入類型“提交”向多個人發送電子郵件，其電子郵件地址在 HTML 表中

Question

我有一個包含 3 列電子郵件地址的 HTML 表。 我試圖弄清楚我將如何 go 關於使用表單 action=mailto: 向表中的所有電子郵件地址發送大量電子郵件並將該操作分配給 input type="submit" 按鈕. 基本上我正在尋找的是當我按下提交按鈕時，瀏覽器將打開我的電子郵件客戶端並在其中包含每個人的電子郵件地址。 我想我必須為每個人的 email 地址分配某種 ID，所以當我按下按鈕時，表單將掃描表格以查找電子郵件地址以包含在電子郵件的“收件人”塊中。

這是一個例子：

<form action="mailto:?"method="get">
<table class="rep">
<th class="rep">Office</th>
<th class="rep">Primary Representative</th>
<th class="rep">Alternate Representative</th>
<th class="rep">Phone #</th>
<th class="rep">Pri. E-mail</th>
<th class="rep">Alt. E-mail</th>
<th class="rep">Supervisor</th>
<th class="rep">Sup. E-mail</th>

<tr class="rep">
    <td class="rep">Mail Room</td>
    <td class="rep">Harry Frill</td>
    <td class="rep">Jack Daniels</td>
    <td class="rep">123-456-7890</td>
    <td class="rep"><a href="mailto:HarryF@yahoo.com">E-Mail</td>
    <td class="rep"><a href="mailto:JDaniels@yahoo.com">E-Mail</td>
    <td class="rep">Lauren Jory</td>
    <td class="rep"><a href="mailto:LaurenJ@yahoo.com">E-Mail</td>
</tr>   
    <tr class="rep">
    <td class="rep">Labs</td>
    <td class="rep">Jay Holiday</td>
    <td class="rep">Tony Tarks</td>
    <td class="rep">987-676-5432</td>
    <td class="rep"><a href="mailto:Jholiday@yahoo.com">E-Mail</td>
    <td class="rep"><a href="mailto:TTarks@yahoo.com">E-Mail</td>
    <td class="rep">Ben Dinkle</td>
    <td class="rep"><a href="mailto:BDinkle@yahoo.com">E-Mail</td>
</tr>   
<input type="Submit" value="E-Mail all reps">
</table>
</form>

Answer 1

I've added a button, along with an event listener that, when clicked, runs through all the <a> tags, extracts their email address, and creates a mailto: URL that includes all those addresses, and redirects the user to that URL .

 document.querySelector('button#doIt').addEventListener('click', function() { var emails = [] document.querySelectorAll('a[href^="mailto:"]').forEach(function(elmt){ var email = elmt.getAttribute('href').replace(/^mailto:/, '') emails.push(email) }); document.location.href = 'mailto:' + emails.join(',') });

 <table class="rep"> <tr> <th class="rep">Office</th> <th class="rep">Primary Representative</th> <th class="rep">Alternate Representative</th> <th class="rep">Phone #</th> <th class="rep">Pri. E-mail</th> <th class="rep">Alt. E-mail</th> <th class="rep">Supervisor</th> <th class="rep">Sup. E-mail</th> </tr> <tr class="rep"> <td class="rep">Mail Room</td> <td class="rep">Harry Frill</td> <td class="rep">Jack Daniels</td> <td class="rep">123-456-7890</td> <td class="rep"><a href="mailto:HarryF@example.com">E-Mail</td> <td class="rep"><a href="mailto:JDaniels@example.com">E-Mail</td> <td class="rep">Lauren Jory</td> <td class="rep"><a href="mailto:LaurenJ@example.com">E-Mail</td> </tr> <tr class="rep"> <td class="rep">Labs</td> <td class="rep">Jay Holiday</td> <td class="rep">Tony Tarks</td> <td class="rep">987-676-5432</td> <td class="rep"><a href="mailto:Jholiday@example.com">E-Mail</td> <td class="rep"><a href="mailto:TTarks@example.com">E-Mail</td> <td class="rep">Ben Dinkle</td> <td class="rep"><a href="mailto:BDinkle@example.com">E-Mail</td> </tr> </table> <button id="doIt">Do it!</button>