Javascript 在这种情况下，如何 for each 元素添加id

var words = ['ac', 'bd', 'bf', 'uy', 'ca'];

document.getElementById("wordTable").innerHTML = arr2tbl(2);

function arr2tbl(ncols) {
  return words.reduce((a, c, i) => {
    if (i % ncols == 0) a.push([]);
    a.at(-1).push(c);
    return a;
  }, []).map(r => "<tr>" + r.map(c => `<td>${c}</td>`).join("") + "</tr>").join("\n");
}

<table id="wordTable"></table>

<table>
<tr>
<td>ac</td> <td>bd</td>
</tr>
<tr>
<td>bf</td> <td>uy</td>
</tr>
<tr>
<td>ca</td><td></td>
</tr>
</table>

<table>
<tr>
<td id="1">ac</td>  <td id="2">bd</td>
</tr>
<tr>
<td id="3">bf</td>  <td id="4">uy</td>
</tr>
<tr>
<td id="5">ca</td><td></td>
</tr>
</table>

function formatWord (wordID){
  document.getElementById(wordID).style.color ="red";
}

arr2tbl( 
  ['ac', 'bd', 'bf', 'uy', 'ca'], 
  document.querySelector(`#wordTable`), 
  2 );

document.querySelector(`pre`).textContent = 
  document.querySelector(`#wordTable`).outerHTML;

function arr2tbl(words, forTable, ncols) {
  let currentRow = document.createElement(`tr`);
  forTable.append(currentRow);
  
  words.forEach( (word, i) => {
     if (i > 0 && i % ncols === 0) {
        forTable.append(currentRow.cloneNode());
     }
     
     forTable.querySelector(`tr:last-child`).append(
      Object.assign( document.createElement(`td`), 
      { id: i + 1, textContent: word } ) );
  });
}

<table id="wordTable"></table>
<h3>The table html</h3>
<pre></pre>

Javascript相关问答推荐

如何使用Echart 5.5.0创建箱形图

如何在RTK上设置轮询，每24小时

togglePopover()不打开但不关闭原生HTML popover'

Chrome是否忽略WebAuthentication userVerification设置？""

我可以从React中的出口从主布局调用一个处理程序函数吗？

PrivateRoute不是路由组件错误

如何在模块层面提供服务？

显示图—如何在图例项上添加删除线效果？

获取Uint8ClampedArray中像素数组的宽度/高度

如何通过使用vanilla JS限制字体大小增加或减少两次来改变字体大小

保持物品顺序的可变大小物品分配到平衡组的算法

在forEach循环中获取目标而不是父对象的属性

如何将未排序的元素追加到数组的末尾？

确保函数签名中的类型安全：匹配值

将异步回调转换为异步生成器模式

如何利用CSS中的隐藏元素实现平滑扩展和防止网格行间隙

更新文本区域行号

Firebase函数中的FireStore WHERE子句无法执行

使用Java脚本替换字符串中的小文本格式hashtag

如何在单击链接时设置一个JavaScript变量(以打开弹出窗口的特定部分)