0

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>
Daweed
  • 1,419
  • 1
  • 9
  • 24
kitchen800
  • 197
  • 1
  • 12
  • 36
  • Note that the `center` tag is well and truly obsolete and should not be used. Also the `table` tag should only be used for tabular data, you may have that in this case, but never use it for layout alone. – Jon P Feb 15 '21 at 22:47

1 Answers1

2

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>

EDIT: as per your request, i added another snippet to use the selectionbox using span without Checkbox. also added multi select when mouse-down over the spans just try

click and hold mousedown then move across the elements, and try single clicks

I hope this meets what exactly you need.

var tgl = document.querySelectorAll('#selectbox');
var func = document.querySelectorAll('select');
var i, x, chng, actv;
var mouseDown = false;
for (i = 0; i < func.length; i++) {
  func[i].addEventListener('change', function() {
    var slct = document.querySelectorAll('.activated');
    chng = this.selectedIndex;
    for (x = 0; x < slct.length; x++) {
      slct[x].firstElementChild.selectedIndex = chng;
    }

  });
}
tgl.forEach((span) => {

  span.addEventListener('click', function() {
    actv = this;
    if (actv.classList.contains('activated')) {
      actv.classList.remove('activated');
    } else {
      actv.classList.add('activated');
    }
  });

  span.addEventListener('mouseover', function() {
    this.onmousedown = function() {
      mouseDown = true
    };
    document.onmouseup = function() {
      mouseDown = false;
    };
    if (mouseDown) {
      if (this.classList.contains('activated')) {
        this.classList.remove('activated');
      } else {
        this.classList.add('activated');
      };
    };
  });
});
#selectbox {
  position: relative;
  display: block;
  width: 4rem;
  border: 1px dashed green;
}

.activated {
  background: rgba(0, 0, 10, 0.1);
}

#selectbox:hover {
  background: powderblue;
}
<tr id="row_1">
  <td> row 1</td>
  <td id="row_1_col_1">
    <center>
      <span id="selectbox">
        <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>
    </span>

    </center>
  </td>
  <td id="row_1_col_2">
    <center>
      <span id="selectbox">
      <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>
    </span>

    </center>
  </td>
  <td id="row_1_col_3">
    <center>
      <span id="selectbox">
      <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>
    </span>

    </center>
  </td>
  <td id="row_1_col_3">
    <center>
      <span id="selectbox">
      <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>
    </span>

    </center>
  </td>
  <td id="row_1_col_3">
    <center>
      <span id="selectbox">
      <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>
    </span>

    </center>
  </td>
  <td id="row_1_col_3">
    <center>
      <span id="selectbox">
      <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>
    </span>

    </center>
  </td>
Burham B. Soliman
  • 1,380
  • 1
  • 9
  • 13