代码之家  ›  专栏  ›  技术社区  ›  Piotr Rochala user736458

如何使用jquery获取表中的单元格(<td>)x和y坐标?

  •  12
  • Piotr Rochala user736458  · 技术社区  · 15 年前

    我正在寻找一种很好的方法让单元格在表格中的X-Y位置。(不要将其与CSS位置混淆,我在笛卡尔坐标系中查找x和y坐标)。

    如我们所知,我们可以使用ex: $('#grid')[0].rows[5].cells[7] .

    但是,如果我想得到价值呢 5x7 当我单击特定单元格时,即:

    $('#grid td').click(function(){
       alert("My position in table is: " + myPosition.X + "x" + myPosition.Y);
    });
    

    我想,最简单的方法是将innerhtml、id或css类添加到每个单元格中( <td class="p-5x7"> 等等)当在后端创建表时,分析它并单击返回,但是有没有任何方法可以纯粹基于DOM获得这些坐标?

    2 回复  |  直到 7 年前
        1
  •  37
  •   bobince    15 年前

    DOM级别2 HTML cellIndex :

    alert('My position in table is: '+this.cellIndex+'x'+this.parentNode.rowIndex);
    
        2
  •  0
  •   antelove    7 年前

    window.onload = function () {
      document.getElementsByTagName('table')[0].addEventListener('click', function(e) {
        alert("My position in table is: " + e.target.parentElement.rowIndex + "x " + e.target.cellIndex + "y");
      }, false);
    }
    tr, td {
      padding: 0.6rem;
      border: 1px solid black
    }
    
    table:hover {
      cursor: pointer;
    }
    <table id="grid">
      <tr>
        <td>0, 0</td>
        <td>0, 1</td>
        <td>0, 2</td>
      </tr>
      <tr>
        <td>1, 0</td>
        <td>1, 1</td>
        <td>1, 2</td>
      </tr>
    </table>