Événement bouton onclick changer toute la sélection de l'option de sélection dans une rangée

Question

J'ai ce code fortement inspiré par ce sujet: (Adding an onclick event to a table row). Ca marche, quand je clique n'importe où sur la ligne, toute l'entrée select change l'option sélectionnée en index 1.

Malheureusement, je voudrais utiliser un bouton ou un lien du premier td de la ligne pour que ça fonctionne ... Comme si j'avais un lien ou un bouton sur une rangée et que je cliquais dessus ... Chaque valeur de l'option de sélection passe à l'index 1

Quelqu'un peut-il m'aider? Merci

function SetJR() { 
      var table = document.getElementById("TO2"); 
      var rows = table.getElementsByTagName("tr"); 
      for (i = 0; i < rows.length; i++) { 
       var currentRow = table.rows[i]; 
       var createClickHandler = 
        function (row) { 
         return function() { 
          var cell1 = row.getElementsByTagName("td")[1]; 
          var cell2 = row.getElementsByTagName("td")[2]; 
          var cell3 = row.getElementsByTagName("td")[3]; 
          var cell4 = row.getElementsByTagName("td")[4]; 
          var cell5 = row.getElementsByTagName("td")[5]; 
          var cell6 = row.getElementsByTagName("td")[6]; 
          var cell7 = row.getElementsByTagName("td")[7]; 
          var cell1d = cell1.getElementsByTagName("select"); 
          var cell2d = cell2.getElementsByTagName("select"); 
          var cell3d = cell3.getElementsByTagName("select"); 
          var cell4d = cell4.getElementsByTagName("select"); 
          var cell5d = cell5.getElementsByTagName("select"); 
          var cell6d = cell6.getElementsByTagName("select"); 
          var cell7d = cell7.getElementsByTagName("select"); 
          for (b = 0; b < cell1d.length; i++) { 
           var id = cell1d[b].options; 
           cell1d[b].selectedIndex = 1; 
           cell2d[b].selectedIndex = 1; 
           cell3d[b].selectedIndex = 1; 
           cell4d[b].selectedIndex = 1; 
           cell5d[b].selectedIndex = 1; 
           cell6d[b].selectedIndex = 1; 
           cell7d[b].selectedIndex = 1; 
           break; 
          } 

         }; 
        }; 

       currentRow.onclick = createClickHandler(currentRow); 
      } 
     } 


    </script> 

Answer 1

function SetJR() { 
 
    var createClickHandler = function(row) { 
 
    return function() { 
 
     var cell1 = row.getElementsByTagName("td")[1]; 
 
     var cell2 = row.getElementsByTagName("td")[2]; 
 
     // ... 
 
     var cell1d = cell1.getElementsByTagName("select"); 
 
     var cell2d = cell2.getElementsByTagName("select"); 
 
     // ... 
 
     for (var b = 0; b < cell1d.length; i++) { 
 
     cell1d[b].selectedIndex = 1; 
 
     cell2d[b].selectedIndex = 1; 
 
     // ... 
 
     break; // what does this mean? loop will run only once? 
 
     } 
 
    }; 
 
    }; 
 

 
    var table = document.getElementById("TO2"); 
 
    for (i = 0; i < table.rows.length; i++) { 
 
    var currentRow = table.rows[i]; 
 
    var button = currentRow.querySelector("td:first-child button"); 
 
    if (button) 
 
     button.onclick = createClickHandler(currentRow); 
 
    } 
 
} 
 
SetJR();

<table cellspacing="2" cellpadding="2" border="1" id="TO2"> 
 
    <tr> 
 
    <td><button>Click</button></td> 
 
    <td> 
 
     <select> 
 
     <option>One</option> 
 
     <option>Two</option> 
 
     <option>Three</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select> 
 
     <option>One</option> 
 
     <option>Two</option> 
 
     <option>Three</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td><button>Click</button></td> 
 
    <td> 
 
     <select> 
 
     <option>One</option> 
 
     <option>Two</option> 
 
     <option>Three</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select> 
 
     <option>One</option> 
 
     <option>Two</option> 
 
     <option>Three</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Il suffit de mettre un élément <button> ou <span> dans la première <td> de chaque ligne et définissez l'attribut onclick soit à votre fonction.

<tr> 
    <td> 
     <button onclick="SetJR()">Button</button> or <span onclick="SetJR()">Span</span> 
    </td> 
    ... 
</tr>