Vue 获取 table表格中 某个 td DOM 的 实际列号（A,BC.)，请教
图中，如我要获取 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])
}
}
获取某个单元格未合并原始行列下标可以用下面函数（JS），ts的话题主转下对应的dom对象类，测试正常
<table border="1">
<tr><td id="t0" colspan="2">t0,0-0</td><td>0-1</td><td>0-2</td><td>0-3</td><td>0-4</td><td>0-5</td><td>0-6</td><td>0-7</td><td>0-8</td></tr>
<tr><td>1-0</td><td rowspan="3" id="t1">t1,1-1<br />2-1<br />3-1</td><td>1-2</td><td>1-3</td><td>1-4</td><td>1-5</td><td>1-6</td><td>1-7</td><td>1-8</td><td>1-9</td></tr>
<tr><td>2-0</td><td>2-2</td><td id="t2" colspan="2" rowspan="2">t2,2-3,2-4,<br>3-3,3-4</td><td>2-5</td><td>2-6</td><td>2-7</td><td>2-8</td><td rowspan="2" id="t4">t4,2-9<br />3-9</td></tr>
<tr><td>3-0</td><td>3-2</td><td>3-5</td><td id="t3" colspan="2" rowspan="3">t3,3-6,3-7,<br>4-6,4-7,<br>5-6,5-7</td><td>3-8</td></tr>
<tr><td>4-0</td><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td><td>4-8</td><td>4-9</td></tr>
<tr><td>5-0</td><td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td><td>5-8</td><td>5-9</td></tr>
<tr><td>6-0</td><td>6-1</td><td>6-2</td><td>6-3</td><td>6-4</td><td>6-5</td><td>6-6</td><td>6-7</td><td>6-8</td><td>6-9</td></tr>
<tr><td>7-0</td><td>7-1</td><td>7-2</td><td>7-3</td><td>7-4</td><td>7-5</td><td>7-6</td><td>7-7</td><td>7-8</td><td>7-9</td></tr>
<tr><td rowspan="2">8-0<br />9-0</td><td rowspan="2" id="t8">t8,8-1<br />9-1</td><td>8-2</td><td>8-3</td><td>8-4</td><td id="t7">t7,8-5</td><td>8-6</td><td>8-7</td><td>8-8</td><td>8-9</td></tr>
<tr><td id=t5>t5,9-2</td><td id="t6">t6,9-3</td><td>9-4</td><td>9-5</td><td>9-6</td><td>9-7</td><td>9-8</td><td>9-9</td></tr>
</table>
<script>
function getRC(curTd) {
var tbody = curTd.parentNode.parentNode;
//从第一行计算总的td数量，最后一行也可以，其他行计算不准确
var firstRow = tbody.rows[0];
var totalCell = 0;
for (var td of firstRow.cells) totalCell += td.colSpan
var cellIndex = -1;
var rowIndex = curTd.parentNode.rowIndex;
if (curTd.parentNode.cells.length == totalCell) {//没有被rowspan,colspan影响到的单元格
cellIndex = curTd.cellIndex;
}
else {
//被rowspan影响，往上找rowspan的行
cellIndex = curTd.cellIndex;
for (var i = rowIndex - 1; i >= 0; i--) {
for (var td of tbody.rows[i].cells) {
if (td.rowSpan > 1) {
if (td.parentNode.rowIndex + td.rowSpan >= rowIndex && curTd.offsetLeft >= td.offsetLeft) {//curTd所在行下标和当前rowspan重合，并且处于curTd前（使用位置来定位）
cellIndex += td.colSpan;//加上次单元格colSpan
}
}
}
}
//同一行中td的colspan合并计算
for (var i = curTd.cellIndex - 1; i >= 0; i--) {
cellIndex += curTd.parentNode.cells[i].colSpan - 1;
}
}
return { rowIndex, cellIndex }
}
console.log('t0', getRC(t0))
console.log('t1', getRC(t1))
console.log('t2', getRC(t2))
console.log('t3', getRC(t3))
console.log('t4', getRC(t4))
console.log('t5', getRC(t5))
console.log('t6', getRC(t6))
console.log('t7', getRC(t7))
console.log('t8', getRC(t8))
</script>
合并单元格后，循环rows.childNodes 获取的td 可以吗
document.getElementById('tab').rows[i].childNodes[j]
获取当前列之前的列的所有colspan之和(空的当1)作为index。
比如第一列，之前的和为0，index=0，A列
第二列合并两列，index = 1，在B列
第三列的index = 1 + 2，即为D列
应该没有你写的这么复杂：
function getcolindex(obj){
var row = obj.parentNode;
var rowIndex = row.rowIndex+1;
var tds = row.getElementsByTagName("td");
var colIndex =0;
for(i=0;i<=tds.length;i++){
colIndex++;
if(tds[i]==obj){
break;
}
colIndex +=tds[i].colSpan>1? tds[i].colSpan-1:0;
}
var alltds = obj.parentNode.parentNode.querySelectorAll('td');
var tdrowIndex =0;
var needAddColNum = 0;
for(i=0;i<alltds.length;i++){
tdrowIndex = alltds[i].parentNode.rowIndex+1;
if(tdrowIndex>=rowIndex) continue;
if(alltds[i].rowSpan >1 ){
console.log("tdrowIndex:" +tdrowIndex);
console.log("tdrowrowSpan:" +alltds[i].rowSpan);
console.log("tdrowIndex:" +tdrowIndex +"+ " +alltds[i].rowSpan +" " + rowIndex );
if((tdrowIndex+ parseInt(alltds[i].rowSpan) -1) >=rowIndex){
needAddColNum++;
}
}
}
console.log("colIndex:" +colIndex);
console.log("needAddColNum:" +needAddColNum);
colIndex= colIndex+needAddColNum;
alert(rowIndex+","+colIndex);
return {rowIndex,colIndex};
}
经过测试，无论怎么合并单元格都没有问题，可以获取到正确的真实的行号和列号
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632