Navigating around html table

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