今天在网友的问答专区里问到这样一个问题，挺有意思的，研究了一下，顺便也实现了一下：
Vue 获取 table表格中 某个 td DOM 的 实际行号和列号（A,BC.)
实现方法如下，把完整的js代码贴出来：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table width="100%" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td onclick="getcolindex(this)">2</td>
<td onclick="getcolindex(this)" colspan="2"> 222222</td>
<td rowspan="2" onclick="getcolindex(this)"> 33333</td>
<td onclick="getcolindex(this)"> 444444</td>
<td colspan="3" onclick="getcolindex(this)"> 555555</td>
<td onclick="getcolindex(this)"> 66666</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>a</td>
<td colspan="3" onclick="getcolindex(this)">xx</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td>a</td>
<td> </td>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td colspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>5</td>
<td colspan="2"> </td>
<td rowspan="3"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>7</td>
<td colspan="2"> </td>
<td rowspan="3"> </td>
<td bgcolor="#336600" onclick="getcolindex(this)"><strong>7777</strong></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>9</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>10</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>11</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script>
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};
}
</script>
</body>
</html>
这段代码可以直接在浏览器里测试
如有问题，欢迎大家留言沟通，点赞支持！！
扫一扫
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
