如何從表格中獲取圖片的ID並將其從一個td移動到另一個td？

Question

我的問題是，如何通過它的id將圖片從一個td元素移動到另一個元素？例如，當我有一個3行的表，每行有3個TD元素。我需要知道這一點，因爲我想獲得圖片所在的TD元素的ID。之後，我想從那裏刪除圖片並將其插入新的td元素。例如，從「編號」，使用movePicture函數（「左」），圖片應該向左移動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'); 

快速的setTimeout例如：

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