Navigating around html table

Question

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:


   row 1

Burham B. Soliman · Accepted Answer

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;
}


   row 1
  
    Select
    
  
  
    Select
    
  
  
    Select

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;
}


   row 1

Navigating around html table

Answers (1)

Related Questions