How to wrap every third table cell with a row within Kentico for email template?

How can I wrap every 3rd <td> with a <tr> using Kentico email template?

I wrote the following code in jQuery, but do not have knowledge or idea how to write this loop logic in Kentico.

var td = $("#myTable tr td");           // Getting all td
td.each(function(i) {                   // Looping the td
  if (i % 3 == 0) {                     // Splitting td as multiple of 3
    td.slice(i, i + 3).wrapAll('<tr/>') // Wrapping it inside tr
  }
}).parent('tr').unwrap();

I want the same logic using Kentico.

Solution

Are you trying to replace the JS with Kentico Macro which can be used in email template or email widget?

If so, and you have Kentico 11+, then you can go to Email marketing application > Email widgets and open the "Latest Article" sample widget and look at how the logic works.

Here is the HTML/macro for the sample widget

{% /*
The Latest articles email widget dynamically obtains four latest articles from the Dancing Goat demo site at the time when the email issue is generated.
It achieves so by using macros that access pages with the given attributes.
*/ @%}

{% 
  articles = Documents["/Articles"]
               .CultureVersions["en-US"]
               .Children
                 .ClassNames("dancinggoat.article")
                 .OrderBy("DocumentPublishFrom DESC")
                 .TopN(4)
                 .WithAllData; 
return; 
#%}

<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:500px;">

{%
  i = 0;
  isFirstItemInRow = false;
  foreach (article in articles) { 
%}

{% 
    isFirstItemInRow = (Modulo(i, 2) == 0);
    articleUrl = UTMContent == String.Empty ? article.RelativeURL : article.RelativeURL + "?utm_content=" + UTMContent;
    articleTeaserUrl = GetAttachmentUrlByGUID(article.ArticleTeaser, "teaser", "teaser");
    articleLinkText = LinkText == String.Empty ? "Continue reading" : LinkText;
    return; 
%}

{%  if (isFirstItemInRow)  { %}
  <tr>
    <td align="center" valign="top" style="font-size:0; padding: 10px 0 15px 0" class="padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<![endif]-->
{% } /* END if */ #%}

<!--[if (gte mso 9)|(IE)]>
<td align="left" valign="top" width="240">
<![endif]-->
      <div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:240px; vertical-align:top; width:100%;" class="wrapper">
        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="{% isFirstItemInRow ? "max-width:240px;" : "max-width:240px; float:right;" %}" class="wrapper">
          <tr>
            <td align="center" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td style="padding: 20px 0 30px 0;">
                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                      <tr>
                        <td align="center" valign="middle"><a href="{% articleUrl #%}" target="_blank"><img src="{% articleTeaserUrl #%}" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max"></a></td>
                      </tr>
                      <tr>
                        <td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;">{% article.ArticleTitle #%}</td>
                      </tr>
                      <tr>
                        <td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;">{% article.ArticleSummary #%}</td>
                      </tr>
                      <tr>
                        <td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;"><a href="{% articleUrl #%}" target="_blank" style="color: #256F9C; text-decoration: none;">{% articleLinkText #%} &rarr;</a></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>

            </td>
          </tr>
        </table>
      </div>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->

{%  if (isFirstItemInRow)  { %}
<!--[if (gte mso 9)|(IE)]>
<td width="20" style="font-size: 1px;">&nbsp;</td>
<![endif]-->
{% } /* END if */ #%}      


{%  if (!isFirstItemInRow)  { %}
<!--[if (gte mso 9)|(IE)]>
</tr>
</table>
<![endif]-->                                    
</td>
</tr>
{% } /* END if */ #%} 

{% i++; return; %} 
{% } /* END foreach */ #%} 

</table>