使用Div ID嵌套表元素

Question

是否可以使用简单的JavaScript / jQuery函数将元素嵌套在表元素中？例如，每个方块都有唯一的ID（A1，B7，C5）。使用该ID，如何在单击图块时将检查器图像放在任何给定的图块中？

Answer 1

＆＃13;

＆＃13;

$('table').on('click', 'td', function() {
  $(this).toggleClass('check');
  var col = $(this).prevAll('td').length;
  var row = $(this).parent().prevAll('tr').length;
  console.log(row + ' ' + col);
});

＆＃13;

table tr {
  background-color: red;
}
table tr:nth-child(2n) td:nth-child(2n+1),
table tr:nth-child(2n+1) td:nth-child(2n) {
  background-color: black
}
table td {
  width: 50px;
  height: 50px;
}
table td.check:before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin-left: 5px;
  margin-top: 5px;
  background-image: url('https://lh4.ggpht.com/Vp9KgW5XXVC31JPh_LmB6KQDK6OK-dwawspREgTx4Jo1EshyaIU_HTB_Dw1fK57bB84=w300');
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

＆＃13;

＆＃13;

＆＃13;