按钮onclick事件连续改变所有select选项selection

Question

我的这段代码深受这个主题的启发：(Adding an onclick event to a table row)。它正在工作，当我单击该行的任意位置时，所有 select 输入都会将其 selected 选项更改为索引 1。

不幸的是，我想使用该行第一个 td 中的按钮或 link 来完成这项工作... 就像我在一行上有一个 link 或一个按钮，当我点击它时......每个 select 选项值都更改为索引 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

只需在每行的第一个 <td> 中放置一个 <button> 或 <span> 元素，然后将其中一个的 onclick 属性设置为您的函数。

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

Answer 2

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>

按钮onclick事件连续改变所有select选项selection

Button onclick event change all the select option selection in a row

html

javascript

dom

buttonclick