图中,如我要获取 table表格中 某个 td DOM 的 列号(A,BC..),怎么取得?
td 本身有 cellIndex 但这个 cellindex 并不是实际是 列号。
由于前面可能有合并单元格,
let td = event.target
let td_row = td.parentNode.rowIndex // 行号很容易取得
let td_col= td.cellIndex // 这个列号是不对的,
于是做 一个初始化的方法,但又有新问题,另外也感觉这样有些复杂化
//初始化单元格,目的: 给所有的单元格做上标记
function tableInit() {
// 获取表格对象
const tb = ref_table.value as HTMLTableElement
// 补全表格所有td,(即 恢复合并时删除的td)
for (let i = 1; i < tb.rows.length; i++) { // 循环 tabel每行 row ,因为第0行第0列是 标记,所有从1开始
for (let x = 1; x < tb.rows[i].cells.length; x++) { // 循环每行的 td
const tb_td = tb.rows[i].cells[x] as HTMLTableCellElement
if (tb_td.colSpan > 1 && tb_td.rowSpan == 1) { // 假如 当前td 的 colSpan > 1
for (let a = 0; a < tb_td.colSpan - 1; a++) { tb.rows[i].insertCell(x + a + 1).className = 'td-hidden' }
}
// 问题在这: 因为td 的 rowSpan>1,是要向下面n行插入 td, 用insertCell(index) 方法,问题 是这个 index的 位置很难确定。
// 把 当前 td的 cellIndex + 1 用到下一行 ,可能会是不对的,
if (tb_td.rowSpan > 1 && tb_td.colSpan == 1) { // 假如 当前td 的 rowSpan > 1,向下面行 插入 td
for (let y = i + 1; y < i + 1 + tb_td.rowSpan - 1; y++) { //
tb.rows[y].insertCell(x).className = 'td-hidden' // 这个 x 相当于 td的 cellIndex + 1
}
}
if (tb_td.rowSpan > 1 && tb_td.colSpan > 1) { // 假如 当前td 的 rowSpan > 1,向下面行 插入 colSpan 个 td
for (let y = i + 1; y < i + 1 + tb_td.rowSpan - 1; y++) { //
for( let z= 0; z< tb_td.colSpan;z++) { tb.rows[y].insertCell(x).className = 'td-hidden'}
}
}
}
}
// 给每个单元格做上标记 td_rc ={ r:初始行数 , c:初始列数, maxc:本列列数+要合并的列数 , maxr:本行行数 + 要合并的行数 }
for (let i = 1; i < tb.rows.length; i++) { // 循环 tabel每行 row
for (let x = 1; x < tb.rows[i].children.length; x++) { // 循环每行的 td
const tb_td = tb.rows[i].children[x] as HTMLTableCellElement
tb_td.setAttribute('td_rc', `{"r":${i},"c":${x},"maxc":${x + tb_td.colSpan - 1},"maxr":${i + tb_td.rowSpan - 1}}`)
}
}
// 移除补全的 td
const td_hidden = document.getElementsByClassName('td-hidden')
for (let len = td_hidden.length, i = len - 1; i >= 0; i--) {
removeElement(td_hidden[i])
}
}