Question

我有一个实际上是棋盘的html表。类似的东西：

<table id="chessboard">
    <tr>
       <td id="A8"></td>
       <td id="B8"></td>
       <td id="C8"></td>
    <tr>
    <tr>
       <td id="A7"></td>
       <td id="B7"></td>
       <td id="C7"></td>
    <tr>
    <tr>
       <td id="A6"></td>
       <td id="B6"></td>
       <td id="C6"></td>
    <tr>
</table>

现在我试图制作一个JQuery脚本，一旦点击表格（棋盘）中的任何地方，就会返回单元格ID（即“A8”，“B6”等）。我已经尝试了很多，但我无法让它发挥作用。

我尝试过的其中一件事：

$("#chessboard").on("click", function(cell){
    alert(cell.target).attr("id"));

})

有人有解决方案吗？

Answer 1

尝试：

$("#chessboard td").on("click", function(cell){
    alert(this.id);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="chessboard">
    <tr>
       <td id="A8">A8</td>
       <td id="B8">B8</td>
       <td id="C8">C8</td>
    <tr>
    <tr>
       <td id="A7">A7</td>
       <td id="B7">B7</td>
       <td id="C7">C7</td>
    <tr>
    <tr>
       <td id="A6">A6</td>
       <td id="B6">B6</td>
       <td id="C6">C6</td>
    <tr>
</table>

Answer 2

在这种情况下，

cell.target指的是调度事件的DOM元素。 DOM元素没有.attr()方法，即jQuery对象方法。

要使用它，您需要首先将您的DOM元素包装在jQuery对象中：

$("#chessboard").on("click", function(e){
    $cell = $(e.target);
    alert($cell.attr('id'));
});

Nitpick：调用相关的event内容，而不是cell。以后它会让你感到困惑。

Answer 3

尝试类似......

    $('#chessboard').click(function() {
    alert($(this).attr('id'));
});

＆＃39; this＆＃39;就像一个魅力。

另外，请不要忘记在文档的某处引用jquery脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 4

试试这个伴侣

  $("#chessboard tr").on("click","td", function(cell){
        alert(this.id);
    })

这是JSFIDDLE

上的示例

Answer 5

感谢您的回复。我有答案。

这有效：

$("#chessboard td").on("click", function(cell){
    alert(this.id);
})

获取表格单元格的ID

5 个答案: