javascript - 按钮的onclick事件改变了一行中所有select选项的选择

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>