0
votes

Essayer de déplacer l'élément HTML sur un emplacement spécifique dans une table

J'essaie de déplacer un élément HTML sur un emplacement spécifique dans une table. Par exemple, j'ai un bouton désactivé étiqueté "ABCD" et une table avec une valeur cellulaire de "XYZ". Je veux déplacer le bouton "ABCD" sur le dessus de la cellule avec la valeur "XYZ" en faisant référence à cette valeur.

Jusqu'à présent, le code que j'ai pour la fonction JavaScript ressemble à ceci: P>

<script type="text/javascript">
    function moveObject() {
        var label = prompt("Please enter object to move", "");
        var location = prompt("Please enter cell location", "");
        var element = document.getElementById(label);
    }
</script>

javascript html

1 commentaires

En outre, mettez toutes les nouvelles informations sur votre question, pas ici. Merci.

3 Réponses :

0
votes

Dites que vous avez la structure suivante pour une table HTML: xxx pré>

Comme vous pouvez voir chaque cellule est un code> élément. p> Étant donné que notre table a une pièce d'identité unique - Mytable - nous pouvons obtenir tous les éléments TD en appelant: p> xxx pré>

la variable Cellules forts> contient un HTML Collection de tous les éléments TD de Mytables forts> mais ce que nous sommes vraiment intéressés est le contenu réel d'une cellule - nous devons donc faire boucler ce tableau et faire référence à chaque contenu de cellules en utilisant .firstchild .Data strong>. Si nous comparons ceci à une chaîne, nous pouvons voir quelles correspondons de cellules. P>

Voici un exemple: p>

p>



<table id="myTable">
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table>

0 commentaires

1
votes

Pour obtenir un résultat attendu, utilisez l'option ci-dessous à l'aide de document.getelementsbyTagname code> et prépendez code> pour ajouter un bouton à la valeur de la cellule


 Obtenez tous les TDS à l'aide de  document.getelementsbyTagname ('TD')  CODE>  LI>
 boucle tous les éléments TD en utilisant pour  li>
 Recherchez une cellule avec du texte XYZ et prépendez le bouton désactivé - ABCD  LI>
 ol>   p> 


<table>
  <tr>
    <td>test</td>
    <td>xyz</td>
  </tr>
</table>
<button  id="abcd" disabled>abcd</button>
<button onclick="moveObject()">Move</button>

2 commentaires

Y a-t-il un moyen de reproduire cela sans utiliser innerhtml?

Vous pouvez utiliser Cell.TextContent au lieu de Cell.innerhTML

0
votes

Invite () code> est une interface de merde. Faites cela à la place:


 emballez tout dans un élément de niveau de bloc ( div  code>,  section  code>,  principal  code>, etc., etc.), nous nous référons-y comme le  "parent"  em>  li>
  enregistrer le parent vers l'événement de clic sur la propriété sur l'événement:  p>

<main>
  <table>
    <thead>
      <tr><th>A</th><th>B</th><th>C</th></tr>
    </thead>
    <tbody>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
    </tbody>
  </table>

  <fieldset>
    <legend>Click a Button</legend>
    <button>X</button>
    <button>X</button>
    <button>X</button>
    <button>X</button>
  </fieldset>
</main>
  Utilisez  event.target  code> pour déterminer ce qui a été cliqué sur. Aucun identifiant, classe ou tagname n'est nécessaire pour identifier  event.target  code>, mais utilisez  .matches ()  code> pour réduire  event.target  code> if / Sinon Control.  P>  LI>
 ul> 
  p> 


function addButton(event) {
  const clicked = event.target;
  const buttons = this.querySelectorAll('button');
  const prompt = this.querySelector('legend');

  if (clicked.matches('button')) {
    if (clicked.matches('.selected')) {
      clicked.classList.remove('selected');
      prompt.textContent = 'Click a Button';
      prompt.style.color = 'black';
    } else {
      for (let button of buttons) {
        button.classList.remove('selected');
      }
      clicked.classList.add('selected');
      prompt.textContent = 'Click a Cell';
      prompt.style.color = 'red';
    }
  } else if (clicked.matches('td')) {
    let button = this.querySelector('.selected');
    if (button) {
      clicked.appendChild(button);
    } else {
      return false;
    }
  } else {
    return false;
  }
}

document.querySelector('main').onclick = addButton;

0 commentaires