如何为DOM创建的国际象棋棋盘添加对应数字与字母标识？

不用手动逐个选中元素添加标识，推荐两种高效的实现方式，直接在创建DOM元素的过程中完成标识添加：

方式一：新增标识行列（布局清晰） #

给现有8x8的棋盘表格，额外添加左侧的数字列（1-8）和底部的字母行（a-h），国际象棋的行号是从下到上计数，列标从左到右a-h，可通过循环计算直接生成：

// 创建center标签居中元素
var center = document.createElement('center');
 
// 创建棋盘表格
var ChessTable = document.createElement('table');
for (var i = 0; i < 8; i++) {
    // 创建行
    var tr = document.createElement('tr');
    
    // 先添加左侧的行号标识单元格
    var numTd = document.createElement('td');
    numTd.textContent = 9 - i; // 国际象棋行号从下到上1-8，i从0到7对应8到1，转成1-8
    numTd.style.width = '20px';
    numTd.style.textAlign = 'center';
    tr.appendChild(numTd);

    for (var j = 0; j < 8; j++) {
        // 创建棋盘格子单元格
        var td = document.createElement('td');

        // 设置格子颜色
        if ((i + j) % 2 == 0) {
            td.setAttribute('class', 'cell whitecell');
        } else {
            td.setAttribute('class', 'cell blackcell');
        }
        tr.appendChild(td);
    }
    ChessTable.appendChild(tr);
}

// 添加底部的字母标识行
var letterTr = document.createElement('tr');
// 先加一个空单元格对齐左侧行号
var emptyTd = document.createElement('td');
letterTr.appendChild(emptyTd);
for (var j = 0; j < 8; j++) {
    var letterTd = document.createElement('td');
    letterTd.textContent = String.fromCharCode(97 + j); // 97是a的ASCII码，j从0到7对应a到h
    letterTd.style.width = '20px';
    letterTd.style.textAlign = 'center';
    letterTr.appendChild(letterTd);
}
ChessTable.appendChild(letterTr);

center.appendChild(ChessTable);

// 设置表格属性
ChessTable.setAttribute('cellspacing', '0');
ChessTable.setAttribute('width', '310px'); // 加上行号列的宽度
document.body.appendChild(center);

// 基础样式优化
var style = document.createElement('style');
style.textContent = `
.cell {
    width: 30px;
    height: 30px;
}
.whitecell {
    background-color: #f0d9b5;
}
.blackcell {
    background-color: #b58863;
}
`;
document.head.appendChild(style);

方式二：直接在棋盘格子内嵌标识（紧凑布局） #

如果不想额外加行列，可以直接在棋盘的边缘格子里嵌入标识：

// 创建center标签居中元素
var center = document.createElement('center');
 
// 创建棋盘表格
var ChessTable = document.createElement('table');
for (var i = 0; i < 8; i++) {
    var tr = document.createElement('tr');
    for (var j = 0; j < 8; j++) {
        var td = document.createElement('td');

        // 设置格子颜色
        if ((i + j) % 2 == 0) {
            td.setAttribute('class', 'cell whitecell');
        } else {
            td.setAttribute('class', 'cell blackcell');
        }

        // 添加行号：第一列的格子（j=0）添加行号
        if (j === 0) {
            td.textContent = 9 - i;
            td.style.textAlign = 'left';
            td.style.paddingLeft = '2px';
        }
        // 添加列标：最后一行的格子（i=7）添加字母
        if (i === 7) {
            // 如果已经有行号，就把列标放在右下角
            if (j === 0) {
                td.innerHTML = `${9 - i}<span style="float:right; padding-right:2px;">${String.fromCharCode(97 + j)}</span>`;
            } else {
                td.textContent = String.fromCharCode(97 + j);
                td.style.textAlign = 'right';
                td.style.paddingRight = '2px';
            }
        }

        tr.appendChild(td);
    }
    ChessTable.appendChild(tr);
}

center.appendChild(ChessTable);

// 设置表格属性
ChessTable.setAttribute('cellspacing', '0');
ChessTable.setAttribute('width', '270px');
document.body.appendChild(center);

// 基础样式优化
var style = document.createElement('style');
style.textContent = `
.cell {
    width: 30px;
    height: 30px;
}
.whitecell {
    background-color: #f0d9b5;
}
.blackcell {
    background-color: #b58863;
}
`;
document.head.appendChild(style);

这两种方式都不需要手动选中每个元素，而是在循环创建DOM的时候直接完成标识添加，比手动操作高效得多，也更易维护。

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