如何通過引用 html 表中的數組來添加 class

Question

我想通過引用數組及其索引在2nd行添加類。

我准備了array ，剩下的就是通過引用index添加 class 。

通過我的工作，效果並不好。

我怎樣才能實現它們？

謝謝

 let html = '' html += '<table>'; let i = 0; html += '<tr>'; for (let d = 0; d < 15; d++) { i = i + 1; html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>' } html += '</tr>'; for (let w = 0; w < 1; w++) { html += '<tr>'; for (let d = 0; d < 15; d++) { html += '<td class=color></td>' } html += '</tr>'; } html += '</table>' document.querySelector('#calendar').innerHTML = html; const arr = [1, 2, 10, 11, 14].map(String); $("td.color").filter(function() { return $(this).index(arr); }).addClass('red');

 td { transition-duration: 0.5s; border: solid black 1px; cursor: pointer; } div { padding: 5px; } table { border-collapse: collapse; }.color{ padding:5px; }.red { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id=calendar></div>

Answer 1

如果標簽名稱和class都引用相同的元素，則不應在標簽名稱和之間有任何空格。 您可以使用includes()檢查索引 + 1是否存在於數組中。

試試下面的方法：

 let html = '' html += '<table>'; let i = 0; html += '<tr>'; for (let d = 0; d < 15; d++) { i = i + 1; html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>' } html += '</tr>'; for (let w = 0; w < 1; w++) { html += '<tr>'; for (let d = 0; d < 15; d++) { html += '<td class=color></td>' } html += '</tr>'; } html += '</table>' document.querySelector('#calendar').innerHTML = html; const arr = [1, 2, 10, 11, 14]; $("td.color").filter(function() { return arr.includes($(this).index()+1); }).addClass('red');

 td { transition-duration: 0.5s; border: solid black 1px; cursor: pointer; } div { padding: 5px; } table { border-collapse: collapse; }.color{ padding:5px; }.red { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id=calendar></div>

Answer 2

您可以通過首先構建索引來稍微整理循環，然后使用反引號清理您的 html 模板。

注意：您應該對屬性使用雙引號，例如 class="color"

const columnCount = 15;
const columnIndexes = [...Array(columnCount).keys()];  // make array of indexes
const rowsCount = 1;
const rowIndexes = [...Array(rowsCount).keys()];

const html = 
    `<table>
        <tr>
            ${columnIndexes.map(c => 
                `<td data-layer="0"><div>${c + 1}</div></td>
            `)}
        </tr>
        ${rowIndexes.map(r => 
            `<tr>
                ${columnIndexes.map(c => 
                    `<td class="${r % 2 === 0 ? 'red' : ''}"></td>`
                )}
            </tr>`
        )}
    </table>
    `