如何通过它的 id 从 table 获取图片并将其从一个 td 移动到另一个？

Question

我的问题是，如何通过它的 id 将图片从一个 td 元素移动到另一个 td 元素？例如，当我有一个 table 有 3 行并且每行有 3 td elements.I 需要知道这一点，因为我想获取图片所在的 td 元素的 id。之后我想从那里删除图片并将其插入到新的 td 元素中。例如，从 "number10" 开始，使用函数 movePicture("left")，图片应向左移动 1 td。选项应为左、右、上、下或 0、1、2、3。谢谢。

td{
  width: 30px;
  height: 30px;
  background-color: lightblue;
  text-align: center;
}

<table><tbody>
<tr>
    <td id="number00">00</td>
    <td id="number10">
        <img src="pic.png" id="picture">10
    </td>
    <td id="number20">20</td>
</tr>
<tr>
    <td id="number01">01</td>
    <td id="number11">11</td>
    <td id="number21">21</td>
</tr>
<tr>
    <td id="number02">02</td>
    <td id="number12">12</td>
    <td id="number22">22</td>
</tr>
</tbody></table>

Answer 1

图片有唯一的id，所以不需要找到包含图片的TD的id。要将图片从任意位置移动到 number11:

document.getElementById('number11').appendChild(document.getElementById('picture'));

好的，现在听起来您需要一个函数：

function movePicture(direction) {
  // get the id of the td that contains the picture
  var currentTD = document.getElementById('picture').parentNode.id;
  // extract the x and y values from the id
  var x = Number(currentTD.charAt(6));
  var y = Number(currentTD.charAt(7));

  // alter the x or y value depending on what kind of move was requested
  switch (direction) {
    case "up":
      if (y > 0) y--;
      break;
    case "down":
      if (y < 2) y++;
      break;
    case "left":
      if (x > 0) x--;
      break;
    case "right":
      if (x < 2) x++;
      break;
  }
  // move the picture to its new home
  document.getElementById('number' + x + y).appendChild(document.getElementById('picture'));  
}

示例：

movePicture('down');
movePicture('left');
movePicture('up');
movePicture('right');

快速设置超时示例：

var moves = ['down','left','up','right'];  // repeat when done
var index = 0;
function doTimedMove() {
  if (index == moves.length) index = 0;
  movePicture(moves[index]);
  index++;
  setTimeout(doTimedMove, 1000);
}

如何通过它的 id 从 table 获取图片并将其从一个 td 移动到另一个？

How to get a picture by it's id from a table and move it from one td to another one?

javascript

jquery

html-table

getelementbyid