如何使用jQuery定位特定的表格单元格？

Question

我试图使用jQuery将特定表格单元格的#id转换为变量，但没有太多运气。有人可以提供一些建议吗？我做了一个小提琴here。

HTML

<input type="button" id="button" value="Click Me" />

<table id="myTable1">
  <tbody>
    <tr>
      <td id="1">
        cell 1
      </td>
      <td id="2">
        Get the id of this cell
      </td>
      <td id="3">
        cell 2
      </td>
    </tr>
  </tbody>
</table>

的jQuery

$(document).ready(function() {
  $("#button").click(function() {
    var td = $(this).closest('table').attr('id'); //find table id
    alert(td);
  });
});

Answer 1

这是第一个解决方案如果你想获得每个细胞的所有id。希望它有所帮助！

$(document).ready(function() {
$("#button").click(function() {
    var ids = [];
    $("tr > td").each(function(index){
    ids.push($(this).attr("id"));
    });
    alert(ids);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />

<table id="myTable1">
  <tbody>
    <tr>
      <td id="1">
        cell 1
      </td>
      <td id="2">
        Get the id of this cell
      </td>
      <td id="3">
        cell 2
      </td>
    </tr>
  </tbody>
</table>

如果您希望逐个查看ID，请参阅第二个解决方案。

$(document).ready(function() {
$("#button").click(function() {
    $("tr > td").each(function(index){
    alert($(this).attr("id"));
    });
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />

<table id="myTable1">
  <tbody>
    <tr>
      <td id="1">
        cell 1
      </td>
      <td id="2">
        Get the id of this cell
      </td>
      <td id="3">
        cell 2
      </td>
    </tr>
  </tbody>
</table>