I have to create a table with button inside each cell. However, I cannot remove the white space between cells. Any idea to do it? Sorry for poor presentation. Please comment if any information required?
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
}
.table_but{
height: 100%;
width: 100%;
margin : 0;
padding : 0;
}
<div id="table">
</div>
There is a problem with the button's borders. First, you should set the buttons to display: block.
One simple solution is to explicitly set the button's height to the cell's height (20px). See this snippet:
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
}
.table_but{
height: 20px;
width: 100%;
margin : 0;
padding : 0;
display: block;
}
<div id="table">
</div>
If you don't need the buttons' borders, removing them solves the problem too (I've added a hover color to help distinguish the buttons):
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
}
.table_but{
height: 100%;
width: 100%;
margin : 0;
padding : 0;
display: block;
border: none;
}
.table_but:hover {
background-color: yellow;
}
<div id="table">
</div>
If I understand correctly, you should use in your css:
// cellpadding
th, td { padding: 0px; }
// cellspacing
table { border-collapse: collapse; border-spacing: 0; } // cellspacing="0"
// valign
th, td { vertical-align: top; }
// align (center)
table { margin: 0 auto; }
Font: In HTML5, with respect to tables, what replaces cellpadding, cellspacing, valign, and align?
If I understood, you just need to set your "line-height" to 0, see the result.
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
line-height: 0;
}
.table_but{
height: 100%;
width: 100%;
margin : 0;
padding : 0;
}
<div id="table">
</div>
Related
This question already has answers here:
How to addEventListener to multiple elements in a single line
(15 answers)
Closed 1 year ago.
So basically I have functions that creates a grid.
When I hover over a particular cell I want the cell to be filled black. But the fill should remain in the cell after the hover.
How do I do that using JS?
I'm new to JS and this is my first time asking a programming related question so I apologize if my question is not clear enough.
const container = document.querySelector('#container');
let rows = document.getElementsByClassName('grid-row');
let cells = document.getElementsByClassName('grid-column');
defaultGrid();
function defaultGrid() {
createRow(18);
createColumn(18);
}
function createRow(rowNum) {
for (let i = 0; i < rowNum; i++) {
let row = document.createElement('div');
container.appendChild(row).className = 'grid-row';
}
}
function createColumn(cellNum) {
for (let i = 0; i < rows.length; i++) {
for (let j = 0; j < cellNum; j++) {
let newCell = document.createElement('div');
rows[j].appendChild(newCell).className = 'grid-column';
}
}
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.grid-column {
display: inline-block;
border: 1px solid black;
min-height: 20px;
min-width: 20px;
margin-left: 2px;
margin-top: 2px;
}
#container {
border: 5px solid chartreuse;
}
.fill {
background: black;
}
<h2>test</h2>
<div id="container">
</div>
Like this:
Delegate from the container
Test the target
I use mouseover for the delegation and add your already defined class that way there is no need to add eventlisteners to each cell
container.addEventListener("mouseover",function(e) {
const tgt = e.target;
if (tgt.classList.contains("grid-column")) tgt.classList.add("fill")
})
const container = document.querySelector('#container');
let rows = document.getElementsByClassName('grid-row');
let cells = document.getElementsByClassName('grid-column');
defaultGrid();
function defaultGrid() {
createRow(18);
createColumn(18);
}
function createRow(rowNum) {
for (let i = 0; i < rowNum; i++) {
let row = document.createElement('div');
container.appendChild(row).className = 'grid-row';
}
}
function createColumn(cellNum) {
for (let i = 0; i < rows.length; i++) {
for (let j = 0; j < cellNum; j++) {
let newCell = document.createElement('div');
rows[j].appendChild(newCell).className = 'grid-column';
}
}
}
container.addEventListener("mouseover",function(e) {
const tgt = e.target;
if (tgt.classList.contains("grid-column")) tgt.classList.add("fill")
})
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.grid-column {
display: inline-block;
border: 1px solid black;
min-height: 20px;
min-width: 20px;
margin-left: 2px;
margin-top: 2px;
}
#container {
border: 5px solid chartreuse;
}
.fill {
background: black;
}
<h2>test</h2>
<div id="container">
</div>
Since you already declared a fill class, just need to add this line to your createColumn function.
function createColumn(cellNum) {
for (let i = 0; i < rows.length; i++) {
for (let j = 0; j < cellNum; j++) {
let newCell = document.createElement('div');
newCell.onmouseenter = () => newCell.classList.add("fill"); ----> Add this line
rows[j].appendChild(newCell).className = 'grid-column';
}
}
}
This will append the class name to the cell element.
Add the event listener to your cell creation loop:
const container = document.querySelector('#container');
let rows = document.getElementsByClassName('grid-row');
let cells = document.getElementsByClassName('grid-column');
defaultGrid();
function defaultGrid() {
createRow(18);
createColumn(18);
}
function createRow(rowNum) {
for (let i = 0; i < rowNum; i++) {
let row = document.createElement('div');
container.appendChild(row).className = 'grid-row';
}
}
function createColumn(cellNum) {
for (let i = 0; i < rows.length; i++) {
for (let j = 0; j < cellNum; j++) {
let newCell = document.createElement('div');
/**
* add eventlistener
*/
newCell.addEventListener('mouseover',function() {
newCell.classList.add('fill');
});
rows[j].appendChild(newCell).className = 'grid-column';
}
}
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.grid-column {
display: inline-block;
border: 1px solid black;
min-height: 20px;
min-width: 20px;
margin-left: 2px;
margin-top: 2px;
}
#container {
border: 5px solid chartreuse;
}
.fill {
background: black;
}
<h2>test</h2>
<div id="container">
</div>
I am trying to crrate a chessboard using HTML and JS. I'm using HTML tables for that purpose. but I'm not sure why but there is are empty spaces around each cells.
I've tried cell-spacing:0; but it doesn't seems to work.\
see the red background around cells.
Here is the code
var table = document.createElement("table");
table.id = "board";
table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
var tr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var td = document.createElement('td');
if (i % 2 == j % 2) {
td.className = "white";
} else {
td.className = "black";
}
tr.appendChild(td);
td.innerHTML += td.cellIndex + 1;
}
table.appendChild(tr);
}
document.body.appendChild(table);
* {
margin: 0;
padding: 0;
}
body {
background: red;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
overflow: scroll;
}
.black {
background: #769656;
}
.white {
background: #eeeed2;
}
table {
border: 2px solid red;
width: 95vw;
cell-spacing: 0;
cell-padding: 0;
height: 95vw;
}
.div2 {
width: 95vw;
height: 95vw;
}
I'm prefering javascript or css solutions to this. Thanks.
Set table.cellSpacing = 0; before adding the table to the document :
var table = document.createElement("table");
table.id = "board";
table.cellSpacing = 0;
table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
var tr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var td = document.createElement('td');
if (i % 2 == j % 2) {
td.className = "white";
} else {
td.className = "black";
}
tr.appendChild(td);
td.innerHTML += td.cellIndex + 1;
}
table.appendChild(tr);
}
document.body.appendChild(table);
* {
margin: 0;
padding: 0;
}
body {
background: red;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
overflow: scroll;
}
.black {
background: #769656;
}
.white {
background: #eeeed2;
}
table {
border: 2px solid red;
width: 95vw;
cell-spacing: 0;
cell-padding: 0;
height: 95vw;
}
.div2 {
width: 95vw;
height: 95vw;
}
Just add border-collapse: collapse to your table CSS:
var table = document.createElement("table");
table.id = "board";
table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
var tr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var td = document.createElement('td');
if (i % 2 == j % 2) {
td.className = "white";
} else {
td.className = "black";
}
tr.appendChild(td);
td.innerHTML += td.cellIndex + 1;
}
table.appendChild(tr);
}
document.body.appendChild(table);
* {
margin: 0;
padding: 0;
}
body {
background: red;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
overflow: scroll;
}
.black {
background: #769656;
}
.white {
background: #eeeed2;
}
table {
border: 2px solid red;
border-collapse: collapse;
width: 95vw;
height: 95vw;
}
td {
text-align: center;
}
.div2 {
width: 95vw;
height: 95vw;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
</body>
</html>
I'm trying to modify the border of a table row with border-radius but it doesn't work!
Here is my code:
function generateTableAntipasti() {
//Build an array containing Customer records.
var antipasti = new Array();
antipasti.push(["Antipasti"]);
antipasti.push(["Patatine"]);
antipasti.push(["Kellogs"]);
antipasti.push(["Ciao"]);
antipasti.push(["Hello"]);
antipasti.push(["Bye"]);
//Create a HTML Table element.
var table = document.createElement("Table");
table.border = "1";
table.className = "Antipasti";
table.cellSpacing = 20;
//Add the data rows.
for (var i = 0; i < antipasti.length; i++) {
row = table.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerHTML = antipasti[i];
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
this is the code for JAVASCRIPT
table {
width: 100%;
padding-left: 50px;
padding-right: 50px;
border: 0px;
}
tr {
width: 80%;
height: 120px;
border-width: 0px;
border-color: orange;
border-radius: 20px;
box-shadow: 0px 4px 4px 4px #707070;
}
table tr td {
color: black;
padding-left: 15px;
padding-right: 15px;
}
this is the code for CSS
This is the image of the site.1
Thank you so much!
I'm trying to put a grid (table) on a div using Javascript. The div has a width of 600px and a height of 400px. Every cell of the table is 20x20px. But the height of cells is bigger than their width. Why's that? And how to fix that?
var htmlElements = "";
for (var r = 0; r < 20; r++) {
htmlElements += '<tr class="tRow">';
for (var c = 0; c < 30; c++) {
htmlElements += '<td class="tCell"></td>';
}
htmlElements += '</tr>'
}
var theTable = document.getElementById("tab");
theTable.innerHTML = htmlElements;
#workspace {
position: absolute;
width: 600px;
height: 400px;
background-color: cadetblue;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
}
table,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 0;
}
td {
width: 20px;
height: 20px;
}
<div id="workspace">
<table id="tab">
</table>
</div>
Your cells are rescaling because you have set a fixed height and width for the container #workspace.
In a table, explicit cell widths and heights are always overridden by the table size as a whole.
If you insist on setting a width then ensure the correct calculation is used.
In this case the width is 631px. (30 right borders and 1 left).
I believe your failed to account for the 1px border in your sum.
var htmlElements = "";
for (var r = 0; r < 20; r++) {
htmlElements += '<tr class="tRow">';
for (var c = 0; c < 30; c++) {
htmlElements += '<td class="tCell"></td>';
}
htmlElements += '</tr>'
}
var theTable = document.getElementById("tab");
theTable.innerHTML = htmlElements;
#workspace {
position: absolute;
width: 631px;
height: 421px;
background-color: cadetblue;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
}
table,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 0;
}
td {
width: 20px;
height: 20px;
}
<div id="workspace">
<table id="tab">
</table>
</div>
Just add box-sizing: border-box; to your cells:
border-box The width and height properties include the content, padding, and border, but do not include the margin. Note that padding
and border will be inside of the box.
var htmlElements = "";
for (var r = 0; r < 20; r++) {
htmlElements += '<tr class="tRow">';
for (var c = 0; c < 30; c++) {
htmlElements += '<td class="tCell"></td>';
}
htmlElements += '</tr>'
}
var theTable = document.getElementById("tab");
theTable.innerHTML = htmlElements;
#workspace {
position: absolute;
width: 600px;
height: 400px;
background-color: cadetblue;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
}
table,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 0;
box-sizing: border-box;
}
td {
width: 20px;
height: 20px;
}
<div id="workspace">
<table id="tab">
</table>
</div>
I am trying to create a pattern of 5 rows of div tags using for loops in javascript. The first row should have 1 div, the second 2 divs and so on until there the last row has 5 divs. What I currently end up with is 1 row of 15 divs.
<script>
for (var i = 0; i < 5; i++) {
for(var j = 0; j <= i; j++) {
var div = document.createElement("div");
document.body.appendChild(div);
}
var p = document.createElement("p");
document.body.appendChild(p);
}
</script>
CSS
<style>
div {
width: 20px;
height: 20px;
border: 1px solid black;
display: inline-block;
position: relative;
float: left;
}
</style>
You can simply consider br tag to create the separation and no need to use float because you will have to clear it after each row:
for (var i = 0; i < 5; i++) {
for (var j = 0; j <= i; j++) {
var div = document.createElement("div");
div.classList.add('box');
document.body.appendChild(div);
}
var br = document.createElement("br");
document.body.appendChild(br);
}
div.box {
width: 20px;
height: 20px;
border: 1px solid black;
display: inline-block;
}
With float you will need something like this:
for (var i = 0; i < 5; i++) {
for (var j = 0; j <= i; j++) {
var div = document.createElement("div");
div.classList.add('box');
document.body.appendChild(div);
}
var br = document.createElement("br");
document.body.appendChild(br);
}
div.box {
width: 20px;
height: 20px;
border: 1px solid black;
float:left;
}
br {
clear:both; /*This is mandatory !!*/
}
Or like this:
for (var i = 0; i < 5; i++) {
var p = document.createElement("div"); /*Create the row*/
p.classList.add('clear'); /*add the clear class*/
for (var j = 0; j <= i; j++) {
var div = document.createElement("div");
div.classList.add('box');
p.appendChild(div); /*Append blocks to the row and not the body*/
}
document.body.appendChild(p); /*Append the row to the body */
}
div.box {
width: 20px;
height: 20px;
border: 1px solid black;
float:left;
}
div.clear {
clear:both; /*This is mandatory !!*/
}