使用 .each（下划线）将 table 行 <tr> 添加到 table

Question

使用下划线模板，我正在尝试创建一个日历。我想将每一天都放在自己的 <td></td> 中，并在 7 天后插入 table 行 <tr></tr>。这样7天就会像一周一样出现在1行。

我正在努力实现的示例

<table> 
    <thead> 
    <tr> 
        <th>Monday</th> 
        <th>Tuesday</th> 
        <th>Wednesday</th> 
        <th>Thursday</th> 
        <th>Friday</th> 
        <th>Saturday</th> 
        <th>Sunday</th> 
    </tr> 
    </thead>  
    <tr>
        <td>1th</td><td>2nd</td><td>3rd</td><td>4th</td><td>5th</td><td>6th</td><td>7th</td>
    </tr>
    <tr>
        <td>8th</td><td>9th</td><td>10th</td><td>11th</td><td>12th</td><td>13th</td><td>14th</td>
    </tr>
    // through to 35 days 
</table>

在下划线模板中，我使用 .each 循环显示来自 api 的天数列表。如果索引是 7 的倍数，我做了这个可悲的尝试，然后添加一个 <tr>，但正如预期的那样，table 被破坏了。他是我的尝试

    <table> 
        <thead> 
        <tr> 
            <th>Monday</th> 
            <th>Tuesday</th> 
            <th>Wednesday</th> 
            <th>Thursday</th> 
            <th>Friday</th> 
            <th>Saturday</th> 
            <th>Sunday</th> 
        </tr> 
        </thead>  
        <% _.each(allDaysData, function(item, index){ %> 
        <% if ( index == 6 || index == 13 || index == 20 || index == 27) { %> <tr>  <% } %> 
            <td >     <%= allDaysData.day %>     </td> 
            <% if ( index == 6 || index == 13 || index == 20 || index == 27) { %> </tr>
        <% } %>         <% }) %> 
    </table>

谁能告诉我如何正确地做到这一点？希望我已经提供了足够的信息来说明我正在尝试做什么。如果没有，我可以添加更多详细信息。

Answer 1

我不知道 underscore.js 但这对我来说看起来不错。

<tr>
<% _.each(allDaysData, function(item, index){ %> 
<td> <%= item.day %> </td> 
<% if ((index + 1) % 7 == 0) { %> </tr><tr>  <% } %> 
<% }) %> 
</tr>

Answer 2

考虑使用 %（取模）运算符。您实现的是运行 if 仅在处理每第 7 个元素时回调。

所以在你的例子中而不是 index == 6, index == 13, ...

的显式声明

你可以使用

if((index + 1) % 7 === 0) { print <tr> here }

使用 .each（下划线）将 table 行 <tr> 添加到 table

Adding table row <tr> into a table using .each (underscore)

javascript

underscore.js