I've created a simple picker which is going to be used to select the number of rows and columns when constructing a table.
Here's the example: http://jsfiddle.net/tnn3qgvj/8/
HTML
<input type="text" value="1 x 1" class="grid-chooser"/>
<div class="grid"></div>
JavaScript
$(function () {
var rows = 5;
var cols = 5;
// create the grid
var grid = '<div class="grid">';
for (var i = 0; i < rows; i++) {
grid += '<div class="row">';
for (var c = 0; c < cols; c++) {
grid += '<div class="square"><div class="inner"></div></div>';
}
grid += '</div>';
}
grid += '</div>';
var $gridChooser = $('.grid-chooser');
var $grid = $(grid)
.insertAfter($gridChooser);
var $allSquares = $('.square');
$grid.on('mouseover', '.square', function () {
var $this = $(this);
var col = $this.index() + 1;
var row = $this.parent().index() + 1;
$allSquares.removeClass('highlight');
// select all the rows and cols indexed lower than
// the one under the mouse
$('.row:nth-child(-n+'+row+') .square:nth-child(-n+'+col+')')
.addClass('highlight');
$gridChooser.val(col + ' x ' + row)
})
});
CSS
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.grid-chooser + .grid {
width: 120px;
height: 120px;
background: rgba(0,0,0,0.2);
position: relative;
padding: 2px;
display: none;
}
.grid-chooser:focus + .grid {
display: block;
}
.grid-chooser + .grid .row:first-child .square:first-child .inner {
background: rgba(0,0,0,0.4);
}
.grid-chooser + .grid .square:first-child {
margin-top: 0;
}
.grid-chooser + .grid .row {
height: calc(100%/5);
}
.grid-chooser + .grid .square {
height: 100%;
width: calc(100%/5);
display: inline-block;
margin: -2px 0;
padding: 1px;
}
.grid-chooser + .grid .square:hover .inner,
.grid-chooser + .grid .square.highlight .inner {
background: rgba(0,0,0,0.4)
}
.grid-chooser + .grid .inner {
height: 100%;
width: 100%;
border-radius: 3px;
background: rgba(0,0,0,0.2);
}
I'm interested to know if there's a more effective or efficient method of selecting the square elements that appear before the mouseover, or any other improvements!