如何通过引用html表格中的数组来添加类

Question

我想2nd通过引用数组及其索引在行中添加类。我准备好了array剩下的一切，通过参考来添加类index。通过我的工作，效果并不好。我怎样才能实现它们？谢谢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

如果标签名称和类引用相同的元素，则两者之间不应有任何空格。您可以使用它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>

    `