Navigating around html table

by

I have a html table 40 x 20. each cell is filled with a selector. each selector has 4 options.
At the moment i have to select by using the mouse each value. is there a way to set it so that i can click and drag the mouse over a group of cells at a timed then press the value on the key board to choose that option for all those cells.
Also it would be really handy if there was a way to set it so I could change the selected cell using the keyboard arrows.

does anyone know a way for both or either of these above?
a little sample of how my table is set up:

    <tr id="row_1">
        <td> row 1</td>
        <td id="row_1_col_1">
            <center><select style="background-color: #ceedd0;" id="row_1_select_1"
                            onchange="changeSelect('row_1','_col_1','_select_1')" name="filter_for">
                <option value="1">1</option>
                <option value="P">P</option>
                <option value="0">-</option>
                <option selected="selected" value="0">0</option>
            </select></center>
        </td>
        <td id="row_1_col_2">
            <center><select style="background-color: #ceedd0;" id="row_1_select_2"
                            onchange="changeSelect('row_1','_col_2','_select_2')" name="filter_for">
                <option value="1">1</option>
                <option value="P">P</option>
                <option value="0">-</option>
                <option selected="selected" value="0">0</option>
            </select></center>
        </td>
        <td id="row_1_col_3">
            <center><select style="background-color: #ceedd0;" id="row_1_select_3"
                            onchange="changeSelect('row_1','_col_3','_select_3')" name="filter_for">
                <option value="1">1</option>
                <option value="P">P</option>
                <option value="0">-</option>
                <option selected="selected" value="0">0</option>
            </select></center>
        </td>

7 thoughts on “Navigating around html table”

  1. a small trick you can go with, using a hidden checkbox, and bind event on it,,

    just try the snippet.

    (click on "Select" of each and try to change one of them.)

    var slct = document.querySelectorAll('.hidden');
var func = document.querySelectorAll('select');
var i, x, chng;
for (i = 0; i < func.length; i++) {
  func[i].onchange = function() {
    chng = this.selectedIndex;
    for (x = 0; x < slct.length; x++) {
      if (slct[x].checked) {
        slct[x].nextSibling.nextSibling.selectedIndex = chng;
      }
    }
  }
}
    .hidden {
  display: none;
}

label {
  background: lightgray;
  padding: 0.10rem 2rem;
}

.hidden:checked~label {
  background: powderblue;
  color: white;
}
    <tr id="row_1">
  <td> row 1</td>
  <td id="row_1_col_1">
    <center><input type="checkbox" id="toggle" class="hidden"><label for="toggle">Select</label><select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
        <option value="1">1</option>
        <option value="P">P</option>
        <option value="0">-</option>
        <option selected="selected" value="0">0</option>
      </select>
    </center>
  </td>
  <td id="row_1_col_2">
    <center><input type="checkbox" id="toggle2" class="hidden"><label for="toggle2">Select</label><select style="background-color: #ceedd0;" id="row_1_select_2" onchange="changeSelect('row_1','_col_2','_select_2')" name="filter_for">
        <option value="1">1</option>
        <option value="P">P</option>
        <option value="0">-</option>
        <option selected="selected" value="0">0</option>
      </select>
    </center>
  </td>
  <td id="row_1_col_3">
    <center><input type="checkbox" id="toggle3" class="hidden"><label for="toggle3">Select</label><select style="background-color: #ceedd0;" id="row_1_select_3" onchange="changeSelect('row_1','_col_3','_select_3')" name="filter_for">
        <option value="1">1</option>
        <option value="P">P</option>
        <option value="0">-</option>
        <option selected="selected" value="0">0</option>
      </select>
    </center>
  </td>
    Reply

Leave a Comment