Comment obtenir une image par son ID d'une table et le déplacer d'un td à l'autre?

Question

Ma question est, comment puis-je déplacer une image d'un élément td à l'autre par son ID? Par exemple quand j'ai une table avec 3 rangées et chaque rangée a 3 éléments de td. J'ai besoin de savoir ceci, parce que je veux obtenir l'id de l'élément td dans lequel l'image est. Après cela, je veux enlever l'image de là et l'insérer dans le nouvel élément td. Par exemple à partir du "numéro ", avec une fonction movePicture ("left") l'image doit être déplacée de 1 td vers la gauche. Les options doivent être à gauche, droite, haut, bas ou 0,1,2,3. Merci.

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

L'image est un identifiant unique afin de trouver l'identifiant du TD qui contient l'image est pas nécessaire. Pour déplacer l'image de nulle part où Number11:

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

OK maintenant il semble que vous avez besoin d'une fonction:

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

exemples:

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

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