如何通过引用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++) {&nbsp; i = i + 1;&nbsp; html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'}html += '</tr>';for (let w = 0; w < 1; w++) {&nbsp; html += '<tr>';&nbsp; for (let d = 0; d < 15; d++) {&nbsp; html += '<td class=color></td>'&nbsp; }&nbsp; html += '</tr>';}html += '</table>'document.querySelector('#calendar').innerHTML = html;const arr = [1, 2, 10, 11, 14];$("td.color")&nbsp; .filter(function() { return arr.includes($(this).index()+1); })&nbsp; .addClass('red');td {&nbsp; transition-duration: 0.5s;&nbsp; border: solid black 1px;&nbsp; cursor: pointer;}div {&nbsp; padding: 5px;}table {&nbsp; border-collapse: collapse;}.color{&nbsp;padding:5px;&nbsp;}&nbsp;.red {&nbsp; 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()];&nbsp; // make array of indexesconst rowsCount = 1;const rowIndexes = [...Array(rowsCount).keys()];const html =&nbsp;&nbsp; &nbsp; `<table>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${columnIndexes.map(c =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `<td data-layer="0"><div>${c + 1}</div></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `)}&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; ${rowIndexes.map(r =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `<tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${columnIndexes.map(c =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `<td class="${r % 2 === 0 ? 'red' : ''}"></td>`&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>`&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; </table>&nbsp; &nbsp; `