Button onclick event連續選擇所有選擇選項

Question

我的代碼非常受此主題的啓發：（Adding an onclick event to a table row）。它的工作，當我點擊行的任何地方，所有的選擇輸入更改其選定的選項索引1.

不幸的是，我想使用一個按鈕或從該行的第一個TD的鏈接，使這項工作... 就像我有一個鏈接或一排按鈕，當我點擊它...每個選項的價值變化索引1

任何人都可以幫我嗎？謝謝

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

只要把<button>或<span>元素中的每一行的第一<td>和無論是onclick屬性設置爲你的函數。

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