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

Question

I have this code highly inspired by this subject: (Adding an onclick event to a table row). It's working, when I click anywhere on the row, all the select input change their selected option to index 1.

Unfortunatly, I would like to use a button or a link from the first td of the row to make this work... Like I'm having a link or a button on a row and when I click on it... Every select option value change to index 1

Can anyone help me? Thank you

 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>

`var currentRow2 = document.getElementById("JR");` and `var createClickHandler = ...;`- why are these inside the loop? — Igor, Oct 04 '17 at 19:17
My bad, it was not the working code... I've edited now. For the createClickHandler, if I try anything to get rid of it. The function stop working. I'm missing something — Daniel Lavoie, Oct 04 '17 at 20:01
`currentRow.getElementsByTagName("td")[0].querySelector("button").onclick = ...;` — Igor, Oct 04 '17 at 20:20
`currentRow.querySelector("td:first-child butt‌on").onclick = ...;` — Igor, Oct 04 '17 at 20:37
I tryed to replace the `currentRow.onclick = createClickHandler(currentRow);` with each of your comment (I created the ``). Didn't work. I'm stuck with this error code `Uncaught TypeError: Cannot set property 'onclick' of null at SetJR at HTMLButtonElement.onclick` — Daniel Lavoie, Oct 04 '17 at 20:50

Igor · Accepted Answer · 2017-10-04T21:26:35.020

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>

Your code is working... But I have to get rid of my two first row (th and a different tr) — Daniel Lavoie, Oct 04 '17 at 21:21

score 0 · Answer 2 · answered Oct 04 '17 at 19:19

0

Just put a <button> or <span> element in the first <td> of each row and set the onclick attribute of either to your function.

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

answered Oct 04 '17 at 19:19

Hapstyx

127
7

That's what I did... Unfortunatly, it still works only when I click on the row. And If I try to get rid of the the createClickHandler, everything stop working =( – Daniel Lavoie Oct 04 '17 at 20:02
Can you provide some example code of one of the rows? – Hapstyx Oct 04 '17 at 20:06
@Hapstyx - wrong function. `SetJR` assigns clicks, not handles them. – Igor Oct 04 '17 at 20:09

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

2 Answers2