javascript - 使用 Div ID 嵌套表格元素

Question

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

Answer 1

$('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);
});

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;
}

<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>