Je suis très nouveau sur JavaScript, je voulais donc poser une question de base très simple. J'ai du HTML qui est répertorié ci-dessous:

<html>

<body>
  <table border="1">
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
    </tr>
    <tr>
      <td>CellOneRowOne</td>
      <td>CellTwoRowOne</td>
      <td>>>></td>
      <td>CellFourRowOne</td>
    </tr>
  </table>
</body>

</html>

Je veux écrire une fonction JavaScript pour que lorsque l'utilisateur clique sur les flèches affichées dans la cellule 3 de la ligne, la valeur de la cellule 1 ligne 1 soit copiée dans la cellule 4 ligne 1.

0
developer2015 6 mars 2016 à 01:23

3 réponses

Meilleure réponse

Voici les codes JS et HTML. Notez que vous pouvez utiliser cette fonction "copy_vals" pour n'importe quelle ligne supplémentaire, à condition que son argument d'entrée soit égal au même index de ligne incluant l'appel de fonction.

En tant que débutant, vous aimerez peut-être être invité à inventer des stratégies qui fonctionnent dans tous les cas (ici, quel que soit l'indice de ligne), en fonction de l'environnement actuel.

Comme vous le voyez, je l'ai écrit une fois et je l'ai appelé deux fois: moins d'efforts, plus on a les moyens! (comme j'aime dire)

Bon codage!

function copy_vals(_row_id) {
  var _src = document.getElementById("cell" + _row_id + "_1");
  var _dest = document.getElementById("cell" + _row_id + "_4");
  _dest.innerHTML = _src.innerHTML;
}
<table>

  <tr>
    <td ID="cell1_1">CellOneRowOne</td>
    <td ID="cell1_2">CellTwoRowOne</td>
    <td ONCLICK="javascript:copy_vals(1);">>>></td>
    <td ID="cell1_4">CellFourRowOne</td>
  </tr>
  <tr>
    <td ID="cell2_1">CellOneRowTwo</td>
    <td ID="cell2_2">CellTwoRowTwo</td>
    <td ONCLICK="javascript:copy_vals(2);">>>></td>
    <td ID="cell2_4">CellFourRowTwo</td>
  </tr>

</table>
0
Sandro Rosa 5 mars 2016 à 22:44

Cela ajoute un événement à chaque flèche, ce qui n'est pas le choix le plus performant, mais si votre table / page est petite, cela ne devrait pas avoir d'importance et est plus facile à gérer le code.

function copyCell(e)
{  
  var link = this,
      td = link.parentNode,
      tr = td.parentNode,
      cells = tr.children;
  
  cells[3].innerHTML = cells[0].innerHTML;
  
}

var links = document.querySelectorAll('td:nth-child(3) :link');

for (var i=0,n=links.length; i<n; i++){
  var link = links[i];
  link.addEventListener('click', copyCell, false);
}
td { text-align: center; }
td:nth-child(3) :link{ text-decoration: none; }
<html>

<body>
  <table border="1">
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
    </tr>
    <tr>
      <td>CellOneRowOne</td>
      <td>CellTwoRowOne</td>
      <td><a href="#" onclick="javascript:return false;">&rarr;</span></td>
      <td>CellFourRowOne</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
      <td><a href="#" onclick="javascript:return false;">&rarr;</span></td>
      <td></td>
    </tr>
  </table>
</body>

</html>
0
vol7ron 5 mars 2016 à 22:55

Vous devrez accéder aux 3 éléments impliqués via JavaScript, puis configurer la cellule à cliquer pour pouvoir répondre à un clic en prenant une valeur de cellule et en la plaçant dans une autre.

  <html>
  <head>
    <script>
        var c1r1 = document.getElementById("c1r1");
        var cellToClick = document.getElementById("cellToClick");
        var c4r1 = document.getElementById("c4r1");

        cellToClick.addEventListener("click", function(){
           c4r1.innerHTML = c1r1.innerHTML;
        });
    </script>
  </head>
 <body>
  <table border="1">
   <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
   </tr>
   <tr>
    <td id="c1r1">CellOneRowOne</td>
    <td>CellTwoRowOne</td>
    <td id="cellToClick">>>></td>
    <td id="c4r1">CellFourRowOne</td>
   </tr>
  </table>
 </body>
 </html>
0
Scott Marcus 5 mars 2016 à 22:30