动态HTML表格双向查询咨询：单元格与tableId互查及JS函数实现

标识规则可行性确认 #

你提出的为单元格添加cell="c_row_col"属性的方案完全符合需求：

• 所有表格同位置的单元格可以使用完全相同的属性值，满足标识统一性要求
• 配合表格元素的唯一id属性，即可实现双向访问的要求
  如果需要更符合HTML5自定义属性规范，也可以调整为data-cell="c_row_col"的写法，避免和未来HTML原生新增属性冲突。

函数实现代码 #

1. GetCell(tableId, row, col) #

该函数用于根据表格ID、行号、列号获取对应的单元格元素：

function GetCell(tableId, row, col) {
  const targetTable = document.getElementById(tableId);
  if (!targetTable) return null;
  const cellSelector = `[cell="c_${row}_${col}"]`;
  return targetTable.querySelector(cellSelector);
}

如果使用data-cell规范写法，只需将选择器修改为[data-cell="c_${row}_${col}"]即可。

2. GetTableId(cell) #

该函数用于获取指定单元格所属的表格ID：

function GetTableId(cell) {
  if (!(cell instanceof HTMLElement)) return null;
  const parentTable = cell.closest('table');
  return parentTable ? parentTable.id : null;
}

注意事项 #

• 行号、列号的计数规则需要全局统一，比如统一从0开始或者从1开始，避免出现查询不匹配的问题
• 如果表格包含表头<th>元素，也需要按照相同规则设置cell属性，否则查询表头位置会返回空结果

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