With this i can make a gird like 3x3 but if i want to make a new one it will stack on the old grid so how do i remove the old grid so i can see the new one?
Example of this:
I type 3 into row and column and click the button it will then make a grid 3x3.
Then i will try again and make the grid 5x5 so i type 5 into row and column but it just stack it on the old grid so how do i replace it with the new grid?
$(document).on("click","#gridBtn",function()
{
// Cal the size of the Main div
var mapHeight = $("#theMap").height(); // 400
var mapWidth = $("#theMap").width(); // 400
// divide it BY
var rowsLeft = $("#rowValue").val();
var columnsTop = $("#columnValue").val();
// Cal the size of the box
var divideHeight = mapHeight / columnsTop; // 100
var divideWidth = mapWidth / rowsLeft; // 100
for (var i = 0; i < rowsLeft; i++) {
$("#theMap").append('<div class="row" style="height:'+divideHeight+'px; width: auto;"></div>');
}
for (var i = 0; i < columnsTop; i++) {
$(".row").append('<div class="square" style="height:'+divideHeight+'px; width:'+divideWidth+'px;"></div>');
}
});
#wrapper {
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
#theMap {
background-color: gray;
height: 90px;
width: 90px;
}
.square {
display: inline-block;
box-shadow: 0 0 0 1px gold inset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="theMap"></div>
<div id="inputWrapper">
<input id="rowValue" type="text" placeholder="rows">
<input id="columnValue" type="text" placeholder="columns">
<button id="gridBtn">Create grid</button>
</div>
</div>
I simply added $("#theMap").html(""); to the start of the function, to clearthe contents of #theMap. Is this what you are wanting?
$(document).on("click","#gridBtn",function()
{
$("#theMap").html("");
// Cal the size of the Main div
var mapHeight = $("#theMap").height(); // 400
var mapWidth = $("#theMap").width(); // 400
// divide it BY
var rowsLeft = $("#rowValue").val();
var columnsTop = $("#columnValue").val();
// Cal the size of the box
var divideHeight = mapHeight / columnsTop; // 100
var divideWidth = mapWidth / rowsLeft; // 100
for (var i = 0; i < rowsLeft; i++) {
$("#theMap").append('<div class="row" style="height:'+divideHeight+'px; width: auto;"></div>');
}
for (var i = 0; i < columnsTop; i++) {
$(".row").append('<div class="square" style="height:'+divideHeight+'px; width:'+divideWidth+'px;"></div>');
}
});
#wrapper {
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
#theMap {
background-color: gray;
height: 90px;
width: 90px;
}
.square {
display: inline-block;
box-shadow: 0 0 0 1px gold inset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="theMap"></div>
<div id="inputWrapper">
<input id="rowValue" type="text" placeholder="rows">
<input id="columnValue" type="text" placeholder="columns">
<button id="gridBtn">Create grid</button>
</div>
</div>
You need to clean the previous "created table" before create a new one, I would try something like:
$("#theMap").val(''); // cleans before append again
$(".row").val(''); // cleans before append again
Related
im trying to make static grid with a button that can change number of boxes in it (from 16x16 to 64x64 and anything between). Grid is 40rem x 40rem, when i try to change manually number of boxes in makeGrid() function it works fine up to 20 (boxes change size accordingly), but anything above 20 stays the same size and gets cutoff from my grid. If there is no grid css overflow property stated, grid width change depending on number of boxes but boxes themself won't shrink
my code:
size button is not working yet, grid size need to be changed mannualy in makeGrid function
const grid = document.getElementById('grid');
const size = document.getElementById('size');
const eraser = document.getElementById('eraser');
const color = document.getElementById('color');
const gridBorder = document.getElementById('grid-borders');
const clear = document.getElementById('clear');
// grid
function makeGrid(number) {
number = number || 16;
let cellWidth = 40 / number + 'rem';
let cellHeight = 40 / number + 'rem';
grid.style.gridTemplateColumns = `repeat( ${number}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${number}, 1fr)`;
for (let i = 0; i < number * number; i++) {
let cell = document.createElement('div');
grid.appendChild(cell).id = 'box';
cell.classList.add('border');
cell.classList.add('box');
cell.style.backgroundColor = 'white';
cell.style.width = cellWidth;
cell.style.height = cellHeight;
}
size.textContent = `${number} x ${number}`;
}
makeGrid();
// drawing on hover
color.addEventListener('click', function () {
grid.addEventListener('mouseover', function (e) {
e.target !== grid ? (e.target.style.backgroundColor = 'black') : null;
});
});
function changeColor(event) {
event.target.style.backgroundColor = 'black';
}
// erase functionality
eraser.addEventListener('click', function () {
grid.addEventListener('mouseover', function (e) {
e.target !== grid ? (e.target.style.backgroundColor = 'white') : null;
});
});
// grid borders
const allBoxes = document.querySelectorAll('.box');
gridBorder.addEventListener('click', function () {
allBoxes.forEach((box) => {
box.classList.toggle('no-border');
box.classList.toggle('border');
});
});
// clear button
clear.addEventListener('click', function () {
allBoxes.forEach((box) => {
box.style.backgroundColor = 'white';
});
});
// size button
// size.addEventListener('click', function () {
// let number = prompt(`Enter grid size less or equal to 100`);
// if (number !== Number.isInteger()) {
// return;
// } else if (number > 100) {
// number = prompt(`Enter grid size greater or equal to 100`);
// }
// });
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: aquamarine;
}
#grid {
display: grid;
justify-content: center;
border: 1px solid #ccc;
width: 40rem;
height: 40rem;
min-width: 0;
min-height: 0;
overflow: hidden;
}
.box {
padding: 1em;
}
#title {
display: flex;
align-items: flex-end;
justify-content: center;
height: 180px;
}
#container {
display: flex;
height: 60%;
width: 1259px;
align-items: flex-start;
justify-content: flex-end;
gap: 20px;
padding-top: 20px;
}
#menu {
display: flex;
flex-direction: column;
gap: 10px;
}
.border {
outline: 1px solid black;
}
.no-border {
outline: none;
}
.black-bg {
background: black;
}
.white-bg {
background: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Etch-a-Sketch</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div id="title">
<h1>Etch-a-Sketch</h1>
</div>
<main id="container">
<div id="menu">
<button id="size"></button>
<button id="color">Color</button>
<button id="eraser">Eraser</button>
<button id="clear">Clear</button>
<button id="grid-borders">Grid Borders</button>
</div>
<div id="grid"></div>
</main>
</body>
</html>
"Why won't my grid cells go below 32px?" - have you checked your padding (hint: 32px is exactly equal to 2 * 16px which in turn is exactly equal to your padding of 1em with most browsers implementing a default font-size of 16px). –
David Thomas
box padding was set to 1em which caused my problem, after deleting it my grid worked as intended
I'm trying to create a tile-like content carousel for a website I'm creating. Basically I need the ordinary content carousel functionality that comes in a lot of different jQuery plug-ins etc. - but instead of the slider being linear, I need the items to shift tiles in a circular manner like this:
Step 1:
Step 2:
Step 3:
I tried creating the setup using Flexbox and some simple jQuery:
$(document).ready(function () {
$(".item").each(function (index) {
$(this).css("order", index);
});
$(".prev").on("click", function () {
// Move all items one order back
$(".item").each(function (index) {
var currentOrder = parseInt($(this).css("order"));
if (currentOrder == undefined) {
currentOrder = index;
}
var newOrder = currentOrder - 1;
if (newOrder < 0) {
newOrder = 5;
}
$(this).css("order", newOrder);
});
});
$(".next").on("click", function () {
// Move all items one order forward
$(".item").each(function (index) {
var currentOrder = parseInt($(this).css("order"));
var newOrder = currentOrder + 1;
if (newOrder > 5) {
newOrder = 0;
}
$(this).css("order", newOrder);
});
});
});
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
}
.item {
width: 125px;
height: 75px;
color: white;
text-align: center;
font-size: 24px;
border: 1px solid white;
padding-top: 50px;
box-sizing: content-box;
background-color: rgb(42, 128, 185);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="prev">Prev</button>
<button class="next">Next</button>
<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div class="item four">4</div>
<div class="item five">5</div>
<div class="item six">6</div>
</div>
but this leaves me with some unresolved issues:
How do I animate the tiles when changing the order (when clicking next/prev)?
How do I fix the order so that the items move in a continuous line instead of wrapping to the start of next line (I'd like the order to be like displayed in step 2 -> 3)?
Any existing plug-in (I've looked but can't find any) or codepen etc. would be very much appreciated as I'm not sure if my approach is maintainable (or even doable).
Thanks a bunch :)
I've used absolute position formula from index to (top, left). Then i've used jQuery to animate that. That's lame but can be improved if that's an issue. It looks nice.
const containerBox = document.querySelector('#container')
let divs = [...containerBox.querySelectorAll('div')]
var size = 100
var margin = 2
function get_top_left(pos) {
if (pos < divs.length / 2) {
return {
left: pos * size + margin * (pos),
top: 0
}
} else {
return {
left: (divs.length - pos - 1) * size + margin * (divs.length - pos - 1),
top: size + margin
}
}
}
var offset = 0
function draw() {
divs.forEach(function(div, index) {
var len = divs.length
index = ((index + offset) % len + len) % len
var pos = get_top_left(index);
//div.style.left = pos.left + "px"
//div.style.top = pos.top + "px"
$(div).animate({
"left": pos.left + "px",
"top": pos.top + "px"
})
})
}
next.onclick = _ => {
offset += 1
draw()
}
prev.onclick = _ => {
offset -= 1
draw()
}
draw();
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 260px;
margin: 10px;
position: relative;
}
#container>div {
width: 100px;
height: 66px;
color: white;
text-align: center;
font-size: 24px;
border: 1px solid white;
padding-top: 34px;
box-sizing: content-box;
background: #2a80b9;
position: absolute;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="prev">Prev</button>
<button id="next">Next</button>
<div id="container">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
</div>
This kind of carousel ?
const
containerBox = document.querySelector('#container')
, nextOrder = [3,0,1,4,5,2]
, prevOrder = [1,2,5,0,3,4]
;
next.onclick =_=>
{
let divs = [...containerBox.querySelectorAll('div')]
nextOrder.forEach(n=> containerBox.appendChild( divs[n]) )
}
prev.onclick =_=>
{
let divs = [...containerBox.querySelectorAll('div')]
prevOrder.forEach(n=> containerBox.appendChild( divs[n]) )
}
#container {
display : flex;
flex-direction : row;
flex-wrap : wrap;
width : 500px;
margin : 20px;
}
#container > div {
width : 125px;
height : 75px;
color : white;
text-align : center;
font-size : 24px;
border : 1px solid white;
padding-top : 50px;
box-sizing : content-box;
background : #2a80b9;
}
<button id="prev">Prev</button>
<button id="next">Next</button>
<div id="container">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 6 </div>
<div> 5 </div>
<div> 4 </div>
</div>
I'm sorry if this is a repeated question and I'd like some help cause I'm a noob.
I created a grid. But every time I enter a different number, it uses a different total amount of pixel. I want the height and the width of the body that contains grid to stay exactly the same size no matter what the number of grid is.
https://moonsol124.github.io/ETCH-A-SKETCH-TOP-PROJECT-/
here is what I made.
java:
function createGrid(maxGrid = 16) {
for (let i = 0; i < maxGrid; i++) {
const divRow = document.createElement('div');
divRow.classList.add('div-row');
for (let j = 0; j < maxGrid; j++) {
const div = document.createElement('div');
div.classList.add('div-style');
divRow.appendChild(div);
}
body.appendChild(divRow);
}
addColorOnGrid();
}
css:
.div-row {
display: flex;
flex-direction: column;
}
.div-style {
width: 25px;
height: 25px;
flex: 1 1 auto;
background-color: RGB(0, 0, 0);
border: solid 3px RGB(255, 255, 255);
}
html:
<body>
<div class="btn-group">
<button class="btn" id="grid-button">Enter number of grid</button>
<button class="btn" id="reset-button">Reset</button>
</div>
<div class="grid-body">
</div>
</body>
please tell me if my approach is wrong. thanks for your help.
I think this will help to you solve your problem I just add these parts
divRow.appendChild(document.createElement("div"));
document.getElementById('ac').appendChild(divRow);
it access the parent alement and create div inside that element
And you can pass any number here to test onLoad="createGrid(6)"
function createGrid(maxGrid) {
for (let i = 0; i < maxGrid; i++) {
const divRow = document.createElement("div");
divRow.classList.add('div-row');
for (let j = 0; j < maxGrid; j++) {
const div = document.createElement('div');
div.classList.add('div-style');
divRow.appendChild(div);
}
divRow.appendChild(document.createElement("div"));
document.getElementById('ac').appendChild(divRow);
}
}
function popup() {
let val = prompt("Please enter value here");
const div = document.getElementsByClassName("div-style");
for(i = 0; div.length > 0; i++){
div[0].remove()
}
this.createGrid(parseInt(val));
}
.grid-body {
display: flex;
flex-direction: row;
}
.div-style {
width: 25px;
height: 25px;
flex: 1 1 auto;
background-color: RGB(0, 0, 0);
border: solid 3px RGB(255, 255, 255);
}
<body onLoad="createGrid(6)">
<div class="btn-group">
<button class="btn" id="grid-button" onClick="popup()">Enter number of grid</button>
<button class="btn" id="reset-button">Reset</button>
</div>
<div class="grid-body" id="ac">
</div>
</body>
How can i adjust every violet colored span to the ones i the same row so that whenever there is more containt in one <span>, those on the same row strech vertically also.
height = auto does work but it does not solve the issue of the span in same rows.
I went for the <span>, maybe i should've build it with <td> and <tr>
Here is the code snippet with HTML CSS and JS
const weekdays = ['Monday', 'Tuesday', 'Wednasday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
let planningsection = document.createElement("div");
planningsection.className = "planning";
let days = document.createElement("div");
days.className = "jours";
planningsection.appendChild(days);
$("#plannings_one")[0].appendChild(planningsection);
weekdays.map(e => {
// Création d'un span
let day = document.createElement("span");
day.className = "jour_one";
let dayText = document.createTextNode(e);
// On insere dans chaque span un jour et le span dans la div jours
day.appendChild(dayText);
days.appendChild(day);
})
let section = document.createElement("section");
section.className = "callender_one";
planningsection.appendChild(section);
for (planning = 0; planning < 7; planning++) {
let colonne = document.createElement("div");
colonne.className = "horaire_one";
colonne.id = ("col" + planning);
for (i = 0; i < 26; i++) {
let span = document.createElement("span");
span.className = "dispo_one_rpv";
// On rajoute un identifiant à la case en fonction de la colonne
span.id = (colonne.id + i);
// let plageText = document.createTextNode("Dispo / id: " + span.id);
let plageText = document.createTextNode("");
span.appendChild(plageText);
colonne.appendChild(span);
section.appendChild(colonne);
}
}
let box = $("#col110")[0];
newText = document.createTextNode("Hello This is a text to show what it is happening right now");
box.appendChild(newText);
#main-section {
display: flex;
flex-direction: row;
}
.plage_rpv {
border: solid 1px grey;
width: 150px;
line-height: 2.5;
height: 50px;
font-size: medium;
text-align: center;
}
.horaire {
border: solid 1px grey;
width: 150px;
line-height: 2.5;
height: 44px;
text-align: center;
}
#plannings_one {
width: 100%;
/* overflow-x: scroll; */
}
.dispo_one_rpv {
/* line-height: 2.9; */
height: 50px;
font-size: 10px;
border: solid 1px #bb12e8;
text-align: center;
}
.callender_one {
width: 100%;
display: flex;
flex-direction: row;
}
.horaire_one {
display: flex;
flex-direction: column;
width: 14.32%;
}
.jours {
display: flex;
}
.jour_one {
width: 14.32%;
line-height: 2.5;
text-align: center;
border: solid 1px grey;
height: 44px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<main class="planning-main_rpv">
<section id="main-section">
<div id="horaire">
<div class="horaire">Horaires</div>
<div class="plage_rpv">08:00 - 08:30</div>
<div class="plage_rpv">08:30 - 09:00</div>
<div class="plage_rpv">09:00 - 09:30</div>
<div class="plage_rpv">09:30 - 10:00</div>
<div class="plage_rpv">10:00 - 10:30</div>
<div class="plage_rpv">10:30 - 11:00</div>
<div class="plage_rpv">11:00 - 11:30</div>
<div class="plage_rpv">11:30 - 12:00</div>
<div class="plage_rpv">12:00 - 12:30</div>
<div class="plage_rpv">12:30 - 13:00</div>
<div class="plage_rpv">13:00 - 13:30</div>
<div class="plage_rpv">13:30 - 14:00</div>
<div class="plage_rpv">14:00 - 14:30</div>
<div class="plage_rpv">14:30 - 15:00</div>
<div class="plage_rpv">15:00 - 15:30</div>
<div class="plage_rpv">15:30 - 16:00</div>
<div class="plage_rpv">16:00 - 16:30</div>
<div class="plage_rpv">16:30 - 17:00</div>
<div class="plage_rpv">17:00 - 17:30</div>
<div class="plage_rpv">17:30 - 18:00</div>
<div class="plage_rpv">18:00 - 18:30</div>
<div class="plage_rpv">18:30 - 19:00</div>
<div class="plage_rpv">19:00 - 19:30</div>
<div class="plage_rpv">19:30 - 20:00</div>
<div class="plage_rpv">20:00 - 20:30</div>
<div class="plage_rpv">20:30 - 21:00</div>
</div>
<div id=plannings_one>
</div>
</section>
</main>
</body>
</html>
Explanation :
For CSS, just replace height property with min-height for the same value in .dispo_one_rpv.
For JavaScript, notice that I have added two functions calc_max() and set_heights(). Whenever you append textNode inside the box element, update the ind variable like :
ind = $(box).index() + 1;
and call function calc_max(). It will automatically calculate the element with maximum height, and set the height of all the elements in the entire row to the calculated value.
const weekdays = ['Monday', 'Tuesday', 'Wednasday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
let planningsection = document.createElement("div");
planningsection.className = "planning";
let days = document.createElement("div");
days.className = "jours";
planningsection.appendChild(days);
$("#plannings_one")[0].appendChild(planningsection);
weekdays.map(e => {
let day = document.createElement("span");
day.className = "jour_one";
let dayText = document.createTextNode(e);
day.appendChild(dayText);
days.appendChild(day);
})
let section = document.createElement("section");
section.className = "callender_one";
planningsection.appendChild(section);
for (planning = 0; planning < 7; planning++) {
let colonne = document.createElement("div");
colonne.className = "horaire_one";
colonne.id = ("col" + planning);
for (i = 0; i < 26; i++) {
let span = document.createElement("span");
span.className = "dispo_one_rpv";
span.id = (colonne.id + i);
let plageText = document.createTextNode("");
span.appendChild(plageText);
colonne.appendChild(span);
section.appendChild(colonne);
}
}
let box = $("#col110")[0];
newText = document.createTextNode("Hello This is a text to show what it is happening right now");
box.appendChild(newText);
var ind = $(box).index() + 1;
function calc_max() {
let max_height = $('#horaire div:eq(' + ind + ')').height();
$('.horaire_one span:nth-child(' + ind + ')').each(function() {
if ($(this).height() > max_height) {
max_height = $(this).height();
}
});
set_heights(max_height);
}
calc_max();
function set_heights(height){
$('#horaire div:eq(' + ind + ')').height(height);
$('.horaire_one span:nth-child(' + ind + ')').height(height);
}
#main-section {
display: flex;
flex-direction: row;
}
.plage_rpv {
border: solid 1px grey;
width: 150px;
line-height: 2.5;
height: 50px;
font-size: medium;
text-align: center;
}
.horaire {
border: solid 1px grey;
width: 150px;
line-height: 2.5;
height: 44px;
text-align: center;
}
#plannings_one {
width: 100%;
/* overflow-x: scroll; */
}
.dispo_one_rpv {
/* line-height: 2.9; */
min-height: 50px;
font-size: 10px;
border: solid 1px #bb12e8;
text-align: center;
}
.callender_one {
width: 100%;
display: flex;
flex-direction: row;
}
.horaire_one {
display: flex;
flex-direction: column;
width: 14.32%;
}
.jours {
display: flex;
}
.jour_one {
width: 14.32%;
line-height: 2.5;
text-align: center;
border: solid 1px grey;
height: 44px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<main class="planning-main_rpv">
<section id="main-section">
<div id="horaire">
<div class="horaire">Horaires</div>
<div class="plage_rpv">08:00 - 08:30</div>
<div class="plage_rpv">08:30 - 09:00</div>
<div class="plage_rpv">09:00 - 09:30</div>
<div class="plage_rpv">09:30 - 10:00</div>
<div class="plage_rpv">10:00 - 10:30</div>
<div class="plage_rpv">10:30 - 11:00</div>
<div class="plage_rpv">11:00 - 11:30</div>
<div class="plage_rpv">11:30 - 12:00</div>
<div class="plage_rpv">12:00 - 12:30</div>
<div class="plage_rpv">12:30 - 13:00</div>
<div class="plage_rpv">13:00 - 13:30</div>
<div class="plage_rpv">13:30 - 14:00</div>
<div class="plage_rpv">14:00 - 14:30</div>
<div class="plage_rpv">14:30 - 15:00</div>
<div class="plage_rpv">15:00 - 15:30</div>
<div class="plage_rpv">15:30 - 16:00</div>
<div class="plage_rpv">16:00 - 16:30</div>
<div class="plage_rpv">16:30 - 17:00</div>
<div class="plage_rpv">17:00 - 17:30</div>
<div class="plage_rpv">17:30 - 18:00</div>
<div class="plage_rpv">18:00 - 18:30</div>
<div class="plage_rpv">18:30 - 19:00</div>
<div class="plage_rpv">19:00 - 19:30</div>
<div class="plage_rpv">19:30 - 20:00</div>
<div class="plage_rpv">20:00 - 20:30</div>
<div class="plage_rpv">20:30 - 21:00</div>
</div>
<div id=plannings_one>
</div>
</section>
</main>
</body>
</html>
I want to add grid lines over an image, after the user inputs the row and column number. But I am too new to html JS CSS.
for example:
<img src="web-image/preview.jpg">
<input type="number" name="row">
<input type="number" name="column">
if the user inputs row = 2, and column = 3.
there will be one horizontal line across the middle and 2 lines vertically across one third and two third of "preview.jpg".The grid only needs to be drawings, I don't need to divide the image into parts or make them clickable.
You can start with Jquery .on() and use append(), check this quick code:
$('button').on('click', function() {
$('.grid table').html('');
var rows = $('input[name="row"]').val(),
cols = $('input[name="column"]').val();
for (i = 0; i < rows; i++) {
$('.grid table').append('<tr></tr>')
}
for (t = 0; t < cols; t++) {
$('.grid table tr').each(function() {
$(this).append('<td></td>')
})
}
})
.grid {
position: relative;
display: inline-block;
height:300px;
}
.grid table {
border-collapse: collapse;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.grid table td {
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<table></table>
<img src="http://lorempixel.com/300/300">
</div>
<br>
<input type="number" name="row">
<input type="number" name="column">
<button>Create Grid</button>
In your JS you can use blur or keyup to detect when the user is done with the field. I'm not sure exactly what you need in terms of grid lines, but this just adds horizontal bars. You can replace the s with whatever you need.
$('input[name="row"]').blur(function(){
if($(this).val() == 2){
//add your bars
$('body').append('<hr><hr>');
}
});
I'm sure there are better ways to do this but this should be fairly easy to follow. And it was fun!
// Reference used elements
var wrapper = document.getElementById('wrapper');
var btn = document.getElementById('update');
var rows = document.getElementById('rows');
var cols = document.getElementById('cols');
btn.addEventListener("click", drawLines);
function drawLines() {
// Clean up
removeLines();
var rowCount = rows.value;
var colCount = cols.value;
var wrapperHeight = wrapper.clientHeight;
// Create rows
for (var i = 1; i < rowCount; i++) {
var line = document.createElement('div');
line.className = 'line row';
line.style.top = (wrapperHeight / rowCount) * i + 'px';
wrapper.appendChild(line);
}
// Create columns
for (var i = 1; i < colCount; i++) {
var line = document.createElement('div');
line.className = 'line column';
line.style.left = (wrapperHeight / colCount) * i + 'px';
wrapper.appendChild(line);
}
}
function removeLines() {
var lines = document.getElementsByClassName('line');
while (lines.length > 0) {
lines[0].parentNode.removeChild(lines[0]);
}
}
#wrapper {
width: 300px;
height: 300px;
position: relative;
}
.line {
background: white;
position: absolute;
}
.row {
height: 1px;
left: 0;
right: 0;
}
.column {
width: 1px;
top: 0;
bottom: 0;
}
<div id="wrapper">
<img id="img" src="http://placehold.it/300x300">
</div>
<input id="rows" type="number" name="row" placeholder="Rows">
<input id="cols" type="number" name="column" placeholder="Columns">
<button id="update">Update</button>