如何为表格内单词元素添加ID以实现动态样式格式化？

问题背景 #

现有JavaScript与HTML代码生成的表格中，承载单词的<td>元素无唯一标识，无法通过formatWord函数动态修改指定单词的样式。需求为每个单词对应的元素添加唯一ID（如1、2、3…），或采用其他可行方案实现动态格式化。

原代码：

JavaScript #

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");
}

HTML #

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

目标函数：

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

方案一：直接为<td>添加唯一ID #

修改arr2tbl函数，在生成<td>元素时，利用原数组的索引（从1开始）作为ID值，确保每个元素的ID唯一。修改后的代码如下：

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

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

function arr2tbl(ncols) {
  // 将每个单词与全局索引（从1开始）绑定
  return words.reduce((a, c, i) => {
    if (i % ncols == 0) a.push([]);
    a.at(-1).push({ word: c, id: i + 1 });
    return a;
  }, []).map(row => 
    "<tr>" + row.map(item => `<td id="${item.id}">${item.word}</td>`).join("") + "</tr>"
  ).join("\n");
}

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

// 测试调用
formatWord(2); // 第二个单词变红
formatWord(5); // 第五个单词变红

此方案直接满足需求，生成的每个<td>都带有id="1"、id="2"等唯一标识，可直接调用formatWord函数修改样式。

方案二：使用自定义数据属性替代ID #

若不想使用ID属性，可通过自定义data-*属性存储唯一标识，再通过选择器定位元素。修改后的代码如下：

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({ word: c, id: i + 1 });
    return a;
  }, []).map(row => 
    "<tr>" + row.map(item => `<td data-word-id="${item.id}">${item.word}</td>`).join("") + "</tr>"
  ).join("\n");
}

// 修改formatWord函数，通过data属性定位元素
function formatWord (wordID){
  document.querySelector(`td[data-word-id="${wordID}"]`).style.color ="red";
}

// 测试调用
formatWord(2);
formatWord(5);

此方案无需使用ID，通过data-word-id属性存储标识，同样能实现动态修改指定单词样式的需求。

内容的提问来源于stack exchange，提问作者Tom