满口金牙 2022-06-18 00:17 采纳率: 91.5%
浏览 288
已结题

Vue 获取 table表格中 某个 td DOM 的 实际列号(A,BC.),请教

img

图中,如我要获取 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])
  }
}



  • 写回答

5条回答

  • CSDN专家-showbo 2022-06-18 15:35
    关注

    获取某个单元格未合并原始行列下标可以用下面函数(JS),ts的话题主转下对应的dom对象类,测试正常

    img

    <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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 6月27日
  • 已采纳回答 6月19日
  • 修改了问题 6月18日
  • 创建了问题 6月18日

悬赏问题

  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料