CODEWITHSUNDEEP
javascriptjquery
Jerry
Jerry

Reputation: 1109

Clone text from several elements to an a href as a mailto subject

I'm trying to append all the text in the td elements to the a element as the subject of the mailto link, but I can only get the first closest elements text. How do I make it so it retrieves the text from all the elements? If possible I would rather have the a link inside the tbody element instead of the tr wrapper.

HTML:

<tbody>
<tr class="row-2" role="row">
    <td class="column-1" tabindex="0" style="">2238221D2</td>
    <td class="column-2">HPINC</td>
    <td class="column-3">N7P47AA</td>
    <td class="column-4">HP USB 3.0 to Gigabit LAN Adapter</td>
    <td class="column-5" style="display: none;">#4.2</td>
    <td class="column-6" style="display: none;">16</td>
    <td class="column-7" style="display: none;">30</td>
    <td class="column-8" style="display: none;">52</td>
    <a class="mailme" href="mailto:[email protected]?subject=Product request&body=">mailtolink</a>
</tr>
</tbody>

Script:

$('a.mailme').each(function() {
    $(this).attr('href', $(this).attr('href') + 
    $(this).closest('a.mailme').prev('td').text());
});

Upvotes: 1

Views: 66

Answers (2)

Edward B.
Edward B.

Reputation: 439

I found a few problems but here is what you want:

https://jsfiddle.net/uqswr2k3/

var subject = "";
$(".row-2 td").each (function() {
  subject = subject + '-' + $(this).html();
}); 

$(".mailme").attr('href', 'mailto:[email protected]?subject=' + subject + '&body=');
<table>
<tbody>
<tr class="row-2" role="row">
    <td class="column-1" tabindex="0" style="">2238221D2</td>
    <td class="column-2">HPINC</td>
    <td class="column-3">N7P47AA</td>
    <td class="column-4">HP USB 3.0 to Gigabit LAN Adapter</td>
    <td class="column-5" style="display: none;">#4.2</td>
    <td class="column-6" style="display: none;">16</td>
    <td class="column-7" style="display: none;">30</td>
    <td class="column-8" style="display: none;">52</td>
    <a class="mailme" href="">mailtolink</a>
</tr>
</tbody>
</table>

Make sure the tbody has an outside table or it can cause issues with jQuery. You were setting the value of the subject to the current iteration and not collecting them all. I put a variable named subject to add each td cells' HTML content. I separated each value in the subject with a dash - to make it cleaner.

Upvotes: 1

Joshua K
Joshua K

Reputation: 2537

Your code is almost right, just select all td-tags, get the text and join the resulting array:

$('a.mailme').each(function() {
    $(this).attr('href', $(this).attr('href') + 
    $(this).closest('.row-2').children('td').slice(0,-1).map(function() {return $(this).html()}).get().join(','));
});

Working fiddle: https://jsfiddle.net/21873jcz/

EDIT My Solution will work if you fix your html code. a tags are not permitted within tr-tags. Only td or th elements are allowed. So please fix your html and it will work

Upvotes: 3

Related Questions