We Keep Coding

Calculate sum of multiple nested rows jQuery

My table has nested rows in which the first rows should have the sum of the values of their children.
How can I insert the sum of months into their respective quarters, and also insert the sum of the quarters into their respective years?
Here's a jsfiddle with the expected result and what I have tried.
Here's another jsfiddle with an attempt to solve this using classes.
$('table thead th').each(function(i) {
i += 1;
calculateColumn(i);
});
function calculateColumn(index) {
var totalColumn = 0;
$('table tr').each(function() {
var num = $('td', this).eq(index).text();
if (!isNaN(num) && num.length !== 0) {
totalColumn += parseInt(num);
}
});
$('table tfoot td').eq(index).html(totalColumn.toString());
}
table {
width: 75%;
}
td {
text-align: center;
}
.year-one {
background-color: lightgray;
}
.font-bold {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th></th>
<th>Column A</th>
<th>Expected Result</th>
</tr>
</thead>
<tbody>
<tr class="year-one font-bold">
<td>2022</td>
<td></td>
<td>12</td>
</tr>
<tr class="year-one">
<td>Total Q1</td>
<td></td>
<td>3</td>
</tr>
<tr class="year-one">
<td>Jan</td>
<td>2</td>
<td></td>
</tr>
<tr class="year-one">
<td>Mar</td>
<td>1</td>
<td></td>
</tr>
<tr class="year-one">
<td>Total Q2</td>
<td></td>
<td>9</td>
</tr>
<tr class="year-one">
<td>May</td>
<td>9</td>
<td></td>
</tr>
<tr class="font-bold">
<td>2021</td>
<td></td>
<td>15</td>
</tr>
<tr>
<td>Total Q1</td>
<td></td>
<td>8</td>
</tr>
<tr>
<td>Jan</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Mar</td>
<td>6</td>
<td></td>
</tr>
<tr>
<td>Total Q2</td>
<td></td>
<td>7</td>
</tr>
<tr>
<td>May</td>
<td>7</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr class="font-bold">
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>

Here is a working version
I rely on Total Q in the first column, but a class might be safer like I did with year
$('table thead th').each(function(i) {
i += 1;
calculateColumn(i);
});
function calculateColumn(index) {
var totalColumn = 0;
let totalCell;
let yearCell;
$('table tr').each(function(i) {
if($(this).find("td").eq(0).hasClass('year')) yearCell = $(this).find("td").eq(index);
if($(this).find("td").eq(0).text().includes("Total Q")) totalCell = $(this).find("td").eq(index);
var num = $('td', this).eq(index).text();
if (!isNaN(num) && num.length !== 0) {
num = +num;
yearCell.text(+yearCell.text() + num)
totalCell.text(+totalCell.text() + num)
totalColumn += num;
}
});
$('table tfoot td').eq(index).html(totalColumn);
}
table {
width: 75%;
}
td {
text-align: center;
}
.year-one {
background-color: lightgray;
}
.font-bold {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th></th>
<th>Column A</th>
<th>Column B</th>
</tr>
</thead>
<tbody>
<tr class="year-one font-bold">
<td class="year">2022</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>Total Q1</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>Jan</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="year-one">
<td>Mar</td>
<td>1</td>
<td>4</td>
</tr>
<tr class="year-one">
<td>Total Q2</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>May</td>
<td>9</td>
<td>11</td>
</tr>
<tr class="font-bold">
<td class="year">2021</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Total Q1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Jan</td>
<td>2</td>
<td>6</td>
</tr>
<tr>
<td>Mar</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>Total Q2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>May</td>
<td>7</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr class="font-bold">
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>

Count number of dynamic rows and display it in input box in html

i have tried to count number of dynamic rows in html table in which when counting the rows it is also counting table head and i want to display number of rows in a input box.
$(document).ready(function(){
$(".count").click(function(){
// Select all the rows in the table
// and get the count of the selected elements
var rowCount = $("#tbpnr tr").length;
var x = document.write(rowCount*280).innerHTML;
return(x);
document.getElementById("answer").value = x;
});
});

This code will count the number of rows in the table body and place the number of rows * 280 into the input element.
$(document).ready(function() {
$(".count").click(function() {
var rowCount = $("#tbpnr tr").length;
document.getElementById("count").textContent = rowCount;
document.getElementById("answer").value = rowCount * 280;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="tbpnr">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<button class="count">Count</button>
<br>
Number of rows:
<b id="count"></b>
<br>
Number of rows * 280:
<input id="answer" />

You can use jQuery itself for adding count in the input box.
Try the below code for displaying count inside input.
$(document).ready(function(){
$(".count").click(function(){
// Select all the rows in the table
// and get the count of the selected elements
var rowCount = $("#tbpnr tr").length;
$("#answer").attr("value", rowCount*280)
});
});
Please add HTML of the table for addressing the table header count issue.

table and generator in the range from to

I would like to generate the range of numbers that I generate and in the table start from the given number to the given number. the point is that there would be some two inputs that will ask from some numbers to start and where to end and that the tables should also adapt to this or how will it be from 1 to 53 then 53 table cells will be displayed. can anyone do this?
$(function () {
var bingo = {
selectedNumbers: [],
generateRandom: function () {
var min = 1;
var max = 89;
var random = Math.floor(Math.random() * (max - min + 1)) + min;
return random;
},
generateNextRandom: function () {
if (bingo.selectedNumbers.length > 88) {
alert("Koniec");
return 0;
}
var random = bingo.generateRandom();
while ($.inArray(random, bingo.selectedNumbers) > -1) {
random = bingo.generateRandom();
}
bingo.selectedNumbers.push(random);
return random;
},
};
$("td").each(function () {
var concatClass = this.cellIndex + "" + this.parentNode.rowIndex;
var numberString = parseInt(concatClass, 10).toString();
$(this)
.addClass("cell" + numberString)
.text(numberString);
$(".cell" + numberString).attr("CellValue", numberString);
});
$("#btnGenerate").click(function () {
var random = bingo.generateNextRandom().toString();
$(".bigNumberDisplay span").text(random);
$("td.cell" + random).addClass("selected");
$("td").each(function () {
if ($(this).attr("CellValue") === random) {
$(this).css("background-color", "yellow");
}
});
});
window.onbeforeunload = function (e) {
e = e || window.event;
var returnString = "Are you sure?";
if (e) {
e.returnValue = returnString;
}
return returnString;
};
});
<head>
<title> Bingo</title>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div class="container">
<div class="bigNumberDisplay">
<span>0</span>
</div>
<div>
<input id="btnGenerate" type="button" value="Wylosuj numer stolika" />
</div>
<br/>
<div class="numbersTable">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<br/>
</div>
</body>
</body>
</html>
div {
text-align: center;
}
.bigNumberDisplay {
font-size: 6em;
}
.numbersTable {
font-size: 1.6em;
}
table {
margin-left: auto;
margin-right: auto;
}
table,tr,td {
border-collapse: collapse;
border: solid 1px #999;
}
td {
min-width: 100px;
color: #fff;
}
td.selected {
color: #000000;
}

You can store min and max in the Object. Consider the following.
$(function() {
var bingo = {
selectedNumbers: [],
min: 1,
max: 50,
generateRandom: function() {
return Math.floor(Math.random() * (bingo.max - bingo.min + 1)) + bingo.min;
},
generateNextRandom: function() {
if (bingo.selectedNumbers.length > 88) {
alert("Koniec");
return 0;
}
var random = bingo.generateRandom();
while ($.inArray(random, bingo.selectedNumbers) > -1) {
random = bingo.generateRandom();
}
bingo.selectedNumbers.push(random);
return random;
},
};
$("td").each(function() {
var concatClass = this.cellIndex + "" + this.parentNode.rowIndex;
var numberString = parseInt(concatClass, 10).toString();
$(this)
.addClass("cell" + numberString)
.text(numberString);
$(".cell" + numberString).attr("CellValue", numberString);
});
$("#btnGenerate").click(function() {
var random = bingo.generateNextRandom().toString();
$(".bigNumberDisplay span").text(random);
$("td.cell" + random).addClass("selected");
$("td").each(function() {
if ($(this).attr("CellValue") === random) {
$(this).css("background-color", "yellow");
}
});
});
window.onbeforeunload = function(e) {
e = e || window.event;
var returnString = "Are you sure?";
if (e) {
e.returnValue = returnString;
}
return returnString;
};
});
div {
text-align: center;
}
.bigNumberDisplay {
font-size: 6em;
}
.numbersTable {
font-size: 1.6em;
}
table {
margin-left: auto;
margin-right: auto;
}
table,
tr,
td {
border-collapse: collapse;
border: solid 1px #999;
}
td {
min-width: 100px;
color: #fff;
}
td.selected {
color: #000000;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<div class="container">
<div class="bigNumberDisplay">
<span>0</span>
</div>
<div>
<input id="btnGenerate" type="button" value="Wylosuj numer stolika" />
</div>
<br/>
<div class="numbersTable">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<br/>
</div>
You can then change that in Initialization or you can add a Setter function so you can these them from User User Input.
You can also use this to check / curb your cell count.

How do I link cells interactively with jquery?

How would I be able to link cells to create a new cell so that I call add a global value like in the snippet. In the snippet there are 3 chosen rows that can be chosen at random by the user and any number of them.
What I want to do is be able to link the chosen rows to add a new cel that has an overall value captured by the user.
How do I link the cells depending on which ones the user chooses. with jquery in a interactive way as to not reload the page.
I want to know how to go about to solve this problem.
the code snippet only shows a visual example after the rows are chosen by the user which should create a new cel next to it.
they have to be linked as to those 3 have a global value of the new cell...
$(document).ready(function() {
$('tbody tr').eq(0).find('td').eq(7).css('background-color', 'green');
$('tbody tr').eq(3).find('td').eq(7).css('background-color', 'green');
$('tbody tr').eq(4).find('td').eq(7).css('background-color', 'green');
});
table,
td {
border: 1px solid #000;
}
td {
width: 40px;
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>

I'm guessing you want a function like this:
$('tr').click(function(){
// The tr that was clicked
var $tr = $(this);
// Create a new td with a green background-color
var $newTd = $('<td></td>').css('background-color', 'green');
// Append the new td to the clicked row
$tr.append($newTd);
// Add an empty td to all other rows
$('tr').not($tr).append('<td></td>');
});

I need to make my buttons interact with Javascript for this etch-a-sketch

I'm trying to get my buttons to work as they say via Javascript. I can't seem to come up with a function to clear the grid and start a new game(which would allow the program to ask the user to enter a new size that they would want to make the grid, bring it back to the default size(16x16), or change the color from black. Lastly, why is that I can't seem to change the height of the table. I can change the width but the table goes all the way to the bottom of the screen. Is there a way to compress it into a square.
http://fiddle.jshell.net/bklynbest/6f68qodf/4/
$(document).ready(function() {
var t = $('<table/>'),
r = $('<tr/>'),
x = 16,
y = 16;
for (var i = 1; i <= (x * y); ++i) {
if (i % y === 0 && t.append(r)) r = $('<tr/>');
r.append($('<td/>'));
}
$('body').append(t);
$('td').hover(function() {
$(this).css("background-color", "black");
});
});
body {
margin: 0;
}
table {
background-color: gray;
width: 100vmin;
height: 100vmin;
border-collapse: collapse;
}
h1 {
padding: 1%;
background-color: red;
font-family: Cursive;
color: yellow;
width: 90%;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head></head>
<title>Etch-A-Sketch</title>
<body>
<h1 align="center"> My Etch-a-Sketch game</h1>
<div class="navbar">
<button class="normal">Default</button>
<button class="random">Random Color</button>
<button class="opacity">Opacity Color</button>
<button class="clear">New Game/Clear</button>
</div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

I have updated your jsFiddle here : http://fiddle.jshell.net/6f68qodf/7/
jQuery
$(document).ready(function () {
var colours = ["red", "blue", "green", "purple", "black", "white"];
var colour = "black";
var t = $('<table/>'),
r = $('<tr/>'),
x = 16,
y = 16;
for (var i = 1; i <= (x * y); ++i) {
if (i % y === 0 && t.append(r)) r = $('<tr/>');
r.append($('<td/>'));
}
$('body').append(t);
$('td').hover(function () {
$(this).css("background-color", colour);
});
$('.clear').on('click', function () {
$('td').css("background-color", "grey");
});
$('.random').on('click', function () {
colour = colours[Math.floor((Math.random() * colours.length))];
console.log(colour);
});
$('.normal').on('click', function () {
colour = "black";
});
});
I haven't coded the opacity button because I'm not sure what you would like to do with that :). But personally a canvas would be a much better bet for this then a table, I hope my code will help.

To get buttons to run JavaScript, you need to add an event listener for the "click" event to each of of your <button> elements. You can do this a few ways, here are two simple ones:
1) Use the onclick attribute on your button elements. Here is a quick example:
function buttonClicked(){
alert("Button was clicked!");
}
<button onclick="buttonClicked()">My Button</button>
2) Create an event listener for the button click:
var myButton = document.getElementById("my_button");
myButton.addEventListener("click", function(e){
alert("You clicked my button!");
});
<button id="my_button">My Button</button>
Here is a link to more information on click events.
As for your issue with height, you set height: 100vmin; on your table in your CSS. That is equivalent of saying, "Set the height of my <table> to be 100% the size of which ever is smaller, the window's height or width." If you really want to use vmin, here is a link with some good information. Otherwise, you should probably use a different CSS unit for the height of your table. See here for a list of CSS units.