Print specific element from JavaScript array to HTML table - javascript

I am a javascript noob and I am trying to create a sudoku generator and i want to print the array values into a table i made.
Here is the javascript code
function generateSudoku() {
let grid = [
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0]
];
function isValid(grid, row, col, num) {
for (let i = 0; i < 9; i++) {
if (grid[row][i] == num || grid[i][col] == num) {
return false;
}
}
let boxX = Math.floor(row / 3) * 3;
let boxY = Math.floor(col / 3) * 3;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (grid[boxX + i][boxY + j] == num) {
return false;
}
}
}
return true;
}
function fillGrid(grid) {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (grid[row][col] == 0) {
for (let num = 1; num <= 9; num++) {
if (isValid(grid, row, col, num)) {
grid[row][col] = num;
if (fillGrid(grid)) {
return true;
} else {
grid[row][col] = 0;
}
}
}
return false;
}
}
}
return true;
}
And here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
<title>Sudoku Puzzle</title>
</head>
<script>
// Call the generateSudoku function to generate the grid
generateSudoku();
</script>
<body>
<h1>Sudoku Puzzle</h1>
<p>Fill in the missing numbers in the puzzle to make each row, column, and 3x3 subgrid contain the numbers 1 through 9 without repetition.</p>
<table>
<tr>
<td class="subgrid-boundary-left subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-right subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-right subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-right subgrid-boundary-up"></td>
</tr>
<tr>
<td class="subgrid-boundary-left"></td>
<td></td>
<td class="subgrid-boundary-right"></td>
<td></td>
<td></td>
<td class="subgrid-boundary-right"></td>
<td></td>
<td></td>
<td class="subgrid-boundary-right"></td>
</tr>
<tr>
<td class="subgrid-boundary-left subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-right subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-right subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-right subgrid-boundary-down"></td>
</tr>
<tr>
<td class="subgrid-boundary-left subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-right subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-right subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-right subgrid-boundary-up"></td>
</tr>
<tr>
<td class="subgrid-boundary-left"></td>
<td></td>
<td class="subgrid-boundary-right"></td>
<td></td>
<td></td>
<td class="subgrid-boundary-right"></td>
<td></td>
<td></td>
<td class="subgrid-boundary-right"></td>
</tr>
<tr>
<td class="subgrid-boundary-left subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-right subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-right subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-right subgrid-boundary-down"></td>
</tr>
<tr>
<td class="subgrid-boundary-left subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-right subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-right subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-up"></td>
<td class="subgrid-boundary-right subgrid-boundary-up"></td>
</tr>
<tr>
<td class="subgrid-boundary-left"></td>
<td></td>
<td class="subgrid-boundary-right"></td>
<td></td>
<td></td>
<td class="subgrid-boundary-right"></td>
<td></td>
<td></td>
<td class="subgrid-boundary-right"></td>
</tr>
<tr>
<td class="subgrid-boundary-left subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-right subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-right subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-down"></td>
<td class="subgrid-boundary-right subgrid-boundary-down"></td>
</tr>
<!-- Repeat for the remaining rows -->
</table>
</body>
</html>
table {
border-collapse: collapse;
margin: 50px auto;
}
td {
width: 40px;
height: 40px;
border: 1px solid black;
text-align: center;
}
.subgrid-boundary-right {
border-right: 3px solid black;
}
.subgrid-boundary-left {
border-left: 3px solid black;
}
.subgrid-boundary-up {
border-top: 3px solid black;
}
.subgrid-boundary-down {
border-bottom: 3px solid black;
}
So i am wondering, how do I get the values from the GRID array to each go into the td lines.
I have tried a few things but in all honesty I do not understand why nothing will print and as a final attempt I want to see if someone here knows how to do it.


To display your generatedSudoku() in the HTML table, you need to use forEach() on the grid array, and then insert the values in the matched cells.
You can do so by adding this just after the grid:
document.querySelectorAll("table tr").forEach((tr, row) => {
tr.querySelectorAll("td").forEach((td, col) => {
td.innerHTML = grid[row][col];
});
});
You should also call the function with onload of the page...
window.onload = function() {
generateSudoku();

Related

Why can't I get the innerHTML from the 10th cell in a row when it works for cells less than 10?

Objective: Show bike riding data and highlight if ride was inside or outside.
Here's the setup that works fine for Sunday and Monday:
var rows = document.getElementsByTagName("tbody")
[0].getElementsByTagName("tr");
// loops through each row
for (i = 0; i < rows.length; i++) {cells = rows[i].getElementsByTagName('td');
if (cells[4].innerHTML == '1')
cells[3].className = "in",
cells[2].className = "in";
if (cells[4].innerHTML == '0')
cells[3].className = "out",
cells[2].className = "out"
if (cells[7].innerHTML == '1')
cells[6].className = "in",
cells[5].className = "in";
if (cells[7].innerHTML == '0')
cells[6].className = "out",
cells[5].className = "out";
}
table {border-collapse: collapse;}
td {border: 2px solid black;}
.in {
background-color: red;
}
.out {
background-color: yellow;
}
<table class="resultGridTable" >
<tbody>
<tr>
<td colspan="2">Week</td>
<td colspan="3">Sun (miles/ave)</td>
<td colspan="3">Mon (miles/ave)</td>
<td colspan="3">Tue (miles/ave)</td>
<td colspan="3">Wed (miles/ave)</td>
<td colspan="3">tdur (miles/ave)</td>
<td colspan="3">Fri (miles/ave)</td>
<td colspan="3">Sat (miles/ave)</td>
<td>Total (miles/ave)</td>
</tr>
<tr>
<td>39</td>
<td>2022-09-25</td>
<td class="sun_miles"></td>
<td class="sun_ave"></td>
<td class="sun_out"></td>
<td class="mon_miles">11.50</td>
<td class="mon_ave">16.6</td>
<td class="mon_out">1</td>
<td class="tue_miles">22</td>
<td class="tue_ave">19</td>
<td class="tue_out">1</td>
<td class="wed_miles"></td>
<td class="wed_ave"></td>
<td class="wed_out"></td>
<td class="thur_miles"></td>
<td class="thur_ave"></td>
<td class="thur_out"></td>
<td class="fri_miles">22.50</td>
<td class="fri_ave'">17.9</td>
<td class="fri_out">0</td>
<td class="sat_miles">20.00</td>
<td class="sat_ave">17.9</td>
<td class="sat_out">0</td>
<td>54.00</td>
</tr>
<tr>
<td>38</td>
<td>2022-09-18</td>
<td class="sun_miles"></td>
<td class="sun_ave"></td>
<td class="sun_out"></td>
<td class="mon_miles"></td>
<td class="mon_ave"></td>
<td class="mon_out"></td>
<td class="tue_miles">39.00</td>
<td class="tue_ave">36.1</td>
<td class="tue_out">0</td>
<td class="wed_miles">22.00</td>
<td class="wed_ave">17.8</td>
<td class="wed_out">0</td>
<td class="thur_miles">18.00</td>
<td class="thur_ave">16.8</td>
<td class="thur_out">0</td>
<td class="fri_miles"></td>
<td class="fri_ave'"></td>
<td class="fri_out"></td>
<td class="sat_miles">22.00</td>
<td class="sat_ave">17.7</td>
<td class="sat_out">0</td>
<td>101.00</td>
</tr>
<tr>
<td>37</td>
<td>2022-09-11</td>
<td class="sun_miles">17.00</td>
<td class="sun_ave">21.8</td>
<td class="sun_out">1</td>
<td class="mon_miles">20.00</td>
<td class="mon_ave">21.3</td>
<td class="mon_out">1</td>
<td class="tue_miles">17.00</td>
<td class="tue_ave">18.6</td>
<td class="tue_out">0</td>
<td class="wed_miles">23.00</td>
<td class="wed_ave">18.4</td>
<td class="wed_out">0</td>
<td class="thur_miles">18.00</td>
<td class="thur_ave">18.8</td>
<td class="thur_out">0</td>
<td class="fri_miles">20.00</td>
<td class="fri_ave'">18.6</td>
<td class="fri_out">0</td>
<td class="sat_miles"></td>
<td class="sat_ave"></td>
<td class="sat_out"></td>
<td>115.00</td>
</tr>
<tr>
<td>36</td>
<td>2022-09-04</td>
<td class="sun_miles">18.00</td>
<td class="sun_ave">18.8</td>
<td class="sun_out">0</td>
<td class="mon_miles"></td>
<td class="mon_ave"></td>
<td class="mon_out"></td>
<td class="tue_miles">19.00</td>
<td class="tue_ave">18.7</td>
<td class="tue_out">0</td>
<td class="wed_miles">23.00</td>
<td class="wed_ave">18.5</td>
<td class="wed_out">0</td>
<td class="thur_miles">17.00</td>
<td class="thur_ave">18.9</td>
<td class="thur_out">0</td>
<td class="fri_miles">17.00</td>
<td class="fri_ave'">19.0</td>
<td class="fri_out">0</td>
<td class="sat_miles">16.00</td>
<td class="sat_ave">18.9</td>
<td class="sat_out">0</td>
<td>110.00</td>
</tr>
</tbody>
</table>
But when I try to add Tuesday by changing the script to:
var rows = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
// loops through each row
for (i = 0; i < rows.length; i++) {cells = rows[i].getElementsByTagName('td');
if (cells[4].innerHTML == '1')
cells[3].className = "in",
cells[2].className = "in";
if (cells[4].innerHTML == '0')
cells[3].className = "out",
cells[2].className = "out"
if (cells[7].innerHTML == '1')
cells[6].className = "in",
cells[5].className = "in";
if (cells[7].innerHTML == '0')
cells[6].className = "out",
cells[5].className = "out";
if (cells[10].innerHTML == '0')
cells[9].className = "in",
cells[8].className = "in";
if (cells[10].innerHTML == '1')
cells[9].className = "out",
cells[8].className = "out";}
It does not like that Cell[10] and I get an error message:
Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')
It doesn't like any number over 10. I'm lost, any help would be greatly appreciated.

Thanks to the comments I go it working and hide the in/out column (see code below). Have not figured out TG's loop yet.
var rows = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
// loops through each row
for (i = 0; i < rows.length; i++) {cells = rows[i].getElementsByTagName('td');
if (cells[4].innerHTML == '1')
cells[3].className = "in",
cells[2].className = "in";
if (cells[4].innerHTML == '0')
cells[3].className = "out",
cells[2].className = "out"
if (cells[7].innerHTML == '1')
cells[6].className = "in",
cells[5].className = "in";
if (cells[7].innerHTML == '0')
cells[6].className = "out",
cells[5].className = "out";
if (cells[10].innerHTML == '1')
cells[9].className = "in",
cells[8].className = "in";
if (cells[10].innerHTML == '0')
cells[9].className = "out",
cells[8].className = "out";
if (cells[13].innerHTML == '1')
cells[12].className = "in",
cells[11].className = "in";
if (cells[13].innerHTML == '0')
cells[12].className = "out",
cells[11].className = "out";
if (cells[16].innerHTML == '1')
cells[15].className = "in",
cells[14].className = "in";
if (cells[16].innerHTML == '0')
cells[15].className = "out",
cells[14].className = "out";
if (cells[19].innerHTML == '1')
cells[18].className = "in",
cells[17].className = "in";
if (cells[19].innerHTML == '0')
cells[18].className = "out",
cells[17].className = "out";
if (cells[22].innerHTML == '1')
cells[21].className = "in",
cells[20].className = "in";
if (cells[22].innerHTML == '0')
cells[21].className = "out",
cells[20].className = "out";
}
table {border-collapse: collapse;}
td {border: 2px solid black;}
.hide {display: none;}
.in {
background-color: red;
}
.out {
background-color: yellow;
}
<table class="resultGridTable" >
<thead>
<th colspan="2">Week</th>
<th colspan="3">Sun (miles/ave)</th>
<th colspan="3">Mon (miles/ave)</th>
<th colspan="3">Tue (miles/ave)</th>
<th colspan="3">Wed (miles/ave)</th>
<th colspan="3">thur (miles/ave)</th>
<th colspan="3">Fri (miles/ave)</th>
<th colspan="3">Sat (miles/ave)</th>
<th>Total (miles/ave)</th>
</thead>
<tbody>
<tr>
<td>39</td>
<td>2022-09-25</td>
<td class="sun_miles"></td>
<td class="sun_ave"></td>
<td class="sun_out hide"></td>
<td class="mon_miles">11.50</td>
<td class="mon_ave">16.6</td>
<td class="mon_out hide">1</td>
<td class="tue_miles">22</td>
<td class="tue_ave">19</td>
<td class="tue_out hide">1</td>
<td class="wed_miles"></td>
<td class="wed_ave"></td>
<td class="wed_out hide"></td>
<td class="thur_miles"></td>
<td class="thur_ave"></td>
<td class="thur_out hide"></td>
<td class="fri_miles">22.50</td>
<td class="fri_ave'">17.9</td>
<td class="fri_out hide">0</td>
<td class="sat_miles">20.00</td>
<td class="sat_ave">17.9</td>
<td class="sat_out hide">0</td>
<td>54.00</td>
</tr>
<tr>
<td>38</td>
<td>2022-09-18</td>
<td class="sun_miles"></td>
<td class="sun_ave"></td>
<td class="sun_out hide"></td>
<td class="mon_miles"></td>
<td class="mon_ave"></td>
<td class="mon_out hide"></td>
<td class="tue_miles">39.00</td>
<td class="tue_ave">36.1</td>
<td class="tue_out hide">0</td>
<td class="wed_miles">22.00</td>
<td class="wed_ave">17.8</td>
<td class="wed_out hide">0</td>
<td class="thur_miles">18.00</td>
<td class="thur_ave">16.8</td>
<td class="thur_out hide">0</td>
<td class="fri_miles"></td>
<td class="fri_ave'"></td>
<td class="fri_out hide"></td>
<td class="sat_miles">22.00</td>
<td class="sat_ave">17.7</td>
<td class="sat_out hide">0</td>
<td>101.00</td>
</tr>
<tr>
<td>37</td>
<td>2022-09-11</td>
<td class="sun_miles">17.00</td>
<td class="sun_ave">21.8</td>
<td class="sun_out hide">1</td>
<td class="mon_miles">20.00</td>
<td class="mon_ave">21.3</td>
<td class="mon_out hide">1</td>
<td class="tue_miles">17.00</td>
<td class="tue_ave">18.6</td>
<td class="tue_out hide">0</td>
<td class="wed_miles">23.00</td>
<td class="wed_ave">18.4</td>
<td class="wed_out hide">0</td>
<td class="thur_miles">18.00</td>
<td class="thur_ave">18.8</td>
<td class="thur_out hide">0</td>
<td class="fri_miles">20.00</td>
<td class="fri_ave'">18.6</td>
<td class="fri_out hide">0</td>
<td class="sat_miles"></td>
<td class="sat_ave"></td>
<td class="sat_out hide"></td>
<td>115.00</td>
</tr>
<tr>
<td>36</td>
<td>2022-09-04</td>
<td class="sun_miles">18.00</td>
<td class="sun_ave">18.8</td>
<td class="sun_out hide">0</td>
<td class="mon_miles"></td>
<td class="mon_ave"></td>
<td class="mon_out hide"></td>
<td class="tue_miles">19.00</td>
<td class="tue_ave">18.7</td>
<td class="tue_out hide">0</td>
<td class="wed_miles">23.00</td>
<td class="wed_ave">18.5</td>
<td class="wed_out hide">0</td>
<td class="thur_miles">17.00</td>
<td class="thur_ave">18.9</td>
<td class="thur_out hide">0</td>
<td class="fri_miles">17.00</td>
<td class="fri_ave'">19.0</td>
<td class="fri_out hide">0</td>
<td class="sat_miles">16.00</td>
<td class="sat_ave">18.9</td>
<td class="sat_out hide">0</td>
<td>110.00</td>
</tr>
</tbody>
</table>

Data transfer to the correct table row

so let me start from the beginning Two timers one timer is where u select when the meeting starts and one where u select the ending of the meeting, i also have a table.
first of all both timers are in another html so I used LocalStorage to get the values of the timers here on the Main html
Now the table it made from 14 rows and 3 columns
First column is with hours starting from 07:00 AM and ending at 20:00 PM
Second column will be filled with names of the meetings
And third column will be filled with the duration of the meeting
I also have a for that reads all the table column values and if it finds the same time as the time entered in the starting hour timer should add the duration of the meeting in on the third column with the id"ora",
and works fine but when it adds the meeting duration it always added on the first row !
So I need that he puts the duration of the meeting in the same row as the
Starting Hour.
Please help !
Here is the code :
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="09:00">
<td class="time">09:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="10:00">
<td class="time">10:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="11:00">
<td class="time">11:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="12:00">
<td class="time">12:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="13:00">
<td class="time">13:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="14:00">
<td class="time">14:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="15:00">
<td class="time">15:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="16:00">
<td class="time">16:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="17:00">
<td class="time">17:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="18:00">
<td class="time">18:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="19:00">
<td class="time">19:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume"></td>
<td id="ora"></td>
</table>
<script>
var y = localStorage.getItem("StartT");
var x = localStorage.getItem("DiffT")
console.log(y);
var tbl = document.getElementById("tbl-1");
var numRows = tbl.rows.length;
for (var i = 1; i < numRows; i ++) {
var ID = tbl.rows[i].id;
var cells = tbl.rows[i].getElementsByTagName('td');
for (var ic=0,it=cells.length;ic<it;ic++) {
if (y == cells[ic].innerHTML) {
document.getElementById("ora").innerHTML=x;
}
console.log(cells[ic].innerHTML)
}
}

This is because you are duplicating the same id everywhere.
You can select the 3rd TD per startT(y) by a single selector:
`tr[id="${y}"] td:nth-child(3)`
Try now to Run example below & enjoy a single LINE javascript!
var y= prompt('What is start time?','09:00');
document.querySelector(`tr[id="${y}"] td:nth-child(3)`).innerHTML = 'SELECTED'
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="09:00">
<td class="time">09:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="10:00">
<td class="time">10:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="11:00">
<td class="time">11:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="12:00">
<td class="time">12:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="13:00">
<td class="time">13:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="14:00">
<td class="time">14:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="15:00">
<td class="time">15:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="16:00">
<td class="time">16:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="17:00">
<td class="time">17:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="18:00">
<td class="time">18:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="19:00">
<td class="time">19:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume"></td>
<td id="ora"></td>
</table>

It seems that the reason it shows up in the first "ora" row each time is because all of your id="ora"s are the same. If you number each one they will correspond to the time and be different:
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume7"></td>
<td id="ora7"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume8"></td>
<td id="ora8"></td>
</tr>
<!-- etc. -->
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume20"></td>
<td id="ora20"></td>
</tr>
</table>
Then in your script you can add the number to each id="ora":
var y = localStorage.getItem("StartT");
var x = localStorage.getItem("DiffT")
console.log(y);
var tbl = document.getElementById("tbl-1");
var numRows = tbl.rows.length;
for (var i = 1; i < numRows; i ++) {
var ID = tbl.rows[i].id;
var cells = tbl.rows[i].getElementsByTagName('td');
for (var ic=0,it=cells.length;ic<it;ic++) {
if (y == cells[ic].innerHTML) {
document.getElementById("ora" + [ic+8]).innerHTML=x;
}
console.log(cells[ic].innerHTML)
}
}
The [ic + 8] adds from 0 in your loop to get the correct time slot.

How to find the next class from table which has a text value

i am trying to calculate the consumed volume from a table from each day (date with it's previous date).
When there are no table rows with empty volumes, this works correct.
But when there are some table rows which have empty volumes, it fails.
In code below you can see what i mean:
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td> // text 30 (110 - 80)
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td> // text 50 (160 - 110)
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td> // text 60 (220 - 160)
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
$('.volume').each(function() {
const next = $(this).parent().next().find('.volume')
$(this).siblings('.consumed').html(+next.html() - $(this).html())
})
Above works great but it fails when my table looks like this:
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
Here is a fiddle how it should look like: Fiddle
So i need something like:
$('.volume').each(function() {
const next = $(this).parent().next().find('.volume')// find next volume if not empty!
$(this).siblings('.consumed').html(+next.html() - $(this).html()) // which belongs to a volume which is not empty!

You could get all next tr elements from the current one and then filter out the ones without the text and then take the first one from that result and that will be your next value.
$('.volume').each(function() {
const currentValue = $(this).text();
const nextValue = $(this)
.parent('tr')
.nextAll('tr')
.filter(function() {
return $(this).find('.volume').text().length;
}).first().find('.volume').text()
if (currentValue && nextValue) {
$(this).next('.consumed').text(
Number(nextValue) - Number(currentValue)
)
}
})
td.date, td.volume, td.consumed {
border: 1px solid #ccc;
padding: 5px;
}
h1 {
font-weight: bold;
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Without empty volumes: shows correct</h1>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Vol</th>
<th>Consumed</th>
</tr>
</thead>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>
<!----------------------------------------------->
<br /><br />
<h1>With some empty volumes; now it fails</h1>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Vol</th>
<th>Consumed</th>
</tr>
</thead>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>

+next.html() will create a NaN when there isn't a value there. Try +(next.html() || $(this).html()) instead.
$('.volume').each(function() {
const next = $(this).parent().next().find('.volume')
var next_val = +(next.html() || $(this).html());
$(this).siblings('.consumed').html(next_val - $(this).html())
})
td{
border: 1px solid black;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>

Easy way to attack it, look for the volume elements with text, do not select the trs elements.
var volumeElems = $(".volume").not(":empty");
volumeElems.each(function(index, elem){
if (index===volumeElems.length-1) return;
const currentElem = $(elem);
const curr = +currentElem.text();
const prev = +volumeElems.eq(index+1).text();
currentElem.next().text(prev-curr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="date">2021-08-15</td>
<td class="volume">80</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-15</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume">110</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-14</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume">160</td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-13</td>
<td class="volume"></td>
<td class="consumed"></td>
</tr>
<tr>
<td class="date">2021-08-12</td>
<td class="volume">220</td>
<td class="consumed"></td>
</tr>
</table>

Highlight highest nth values in each table row

I have the following table, I am wanting to add a class to the top 5 values in each row, only of the TD's with the class of 'championshipPoints'. After some searching and trial and error, I have managed to get the class added to the highest value, but I am struggling to get any further.
If the 6th and 7th values are the same I only want one of them highlighted.
I would like to try and solve on my own but could do with a pointer or 2 to start me off.
Thanks in advance.
HTML
<table id="2020societyChampionship">
<tbody>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player1</td>
<td class='championshipPoints'>6</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>7</td>
<td class='championshipPoints'>13</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player2</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>8</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>16</td>
<td class='championshipPoints'>22</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
</tbody>
JQ
$(document).ready(function(){
$('tbody tr').each(function() {
var $tds = $(this).find('.championshipPoints');
var values = $tds.map(function(){return parseFloat($(this).text());}).get();
$tds.eq(values.reduce((iMax, x, i, arr) => x > arr[iMax] ? i : iMax,
0)).addClass('highestFive');
});
});
JSFiddle

Using sort() and slice()
$('tbody tr').each(function() {
$(this).find('.championshipPoints').sort(function(a, b) {
return b.innerText - a.innerText;
}).slice(0, 5).addClass('highestFive')
});
.highestFive {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="2020societyChampionship">
<tbody>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player1</td>
<td class='championshipPoints'>6</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>7</td>
<td class='championshipPoints'>13</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player2</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>8</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>16</td>
<td class='championshipPoints'>22</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
</tbody>
</table>

You were pretty close. I've made this js fiddle
$(document).ready(function() {
$('tbody tr').each(function() {
var $tds = $(this).find('.championshipPoints');
var values = $tds.map(function() {
return parseFloat($(this).text());
}).get();
values.sort((a, b) => a - b);
console.log(values);
const highlightAbove = values[values.length - 5];
$tds.each(function() {
var val = parseFloat($(this).text());
if (val >= highlightAbove) $(this).addClass('h')
})
});
});
I get the values, sort the values, get the 5th largest number, and then iterate over the tables and highlight the ones >= the 5th largest number by adding a class.

Turning an array of jquery objects into html

I have an array of objects, these objects being <tr>'s with children <td>'s, etc.
How can I put the objects into the dom, replacing what they were before my methods?
<table id="trg">
<tbody>
<tr class="trg-quantity-head">
<th class="trg-quantity quantity-head">Quantity</th>
<th class="trg-quantity">0-10</th>
<th class="trg-quantity">11+</th>
<th class="trg-quantity">100+</th>
<th class="trg-quantity">250+</th>
</tr>
<tr class="trg-variations">
<td class="trg-variation">1″</td>
<td class="trg-price trg-price-base">$0.02</td>
<td class="trg-price trg-price-table">$0.01</td>
<td class="trg-price trg-price-table">$14.94</td>
<td class="trg-price trg-price-table">$14.18</td>
</tr>
<tr class="trg-variations">
<td class="trg-variation">1-1/2”</td>
<td class="trg-price trg-price-base">$33.27</td>
<td class="trg-price trg-price-table">$28.02</td>
<td class="trg-price trg-price-table">$27.00</td>
<td class="trg-price trg-price-table">$29.03</td>
</tr>
<tr class="trg-variations">
<td class="trg-variation">1-1/4”</td>
<td class="trg-price trg-price-base">$25.72</td>
<td class="trg-price trg-price-table">$21.57</td>
<td class="trg-price trg-price-table">$20.66</td>
<td class="trg-price trg-price-table">$19.70</td>
</tr>
<tr class="trg-variations">
<td class="trg-variation">1-3/4”</td>
<td class="trg-price trg-price-base">$48.91</td>
<td class="trg-price trg-price-table">$43.91</td>
<td class="trg-price trg-price-table">$42.21</td>
<td class="trg-price trg-price-table">$40.36</td>
</tr>
<tr class="trg-variations">
<td class="trg-variation">1/2″</td>
<td class="trg-price trg-price-base">$9.87</td>
<td class="trg-price trg-price-table">$6.32</td>
<td class="trg-price trg-price-table">$5.83</td>
<td class="trg-price trg-price-table">$5.38</td>
</tr>
<tr class="trg-variations">
<td class="trg-variation">2”</td>
<td class="trg-price trg-price-base">$58.88</td>
<td class="trg-price trg-price-table">$53.88</td>
<td class="trg-price trg-price-table">$51.16</td>
<td class="trg-price trg-price-table">$49.50</td>
</tr>
<tr class="trg-variations">
<td class="trg-variation">3/4″</td>
<td class="trg-price trg-price-base">$15.27</td>
<td class="trg-price trg-price-table">$10.65</td>
<td class="trg-price trg-price-table">$10.24</td>
<td class="trg-price trg-price-table">$9.52</td>
</tr>
<tr class="trg-variations">
<td class="trg-variation">3/8″</td>
<td class="trg-price trg-price-base">$8.52</td>
<td class="trg-price trg-price-table">$5.44</td>
<td class="trg-price trg-price-table">$4.54</td>
<td class="trg-price trg-price-table">$4.16</td>
</tr>
<tr class="trg-variations">
<td class="trg-variation">5/8″</td>
<td class="trg-price trg-price-base">$11.43</td>
<td class="trg-price trg-price-table">$7.80</td>
<td class="trg-price trg-price-table">$7.35</td>
<td class="trg-price trg-price-table">$6.85</td>
</tr>
</tbody>
</table>
Here is the js I have used to run through and sort this table:
http://jsfiddle.net/uxRmr/1/

Refactored version of David Ferogi's Fiddle.
Refactored Fiddle
function sortByRationalValue (a,b){
return a.rationalValue - b.rationalValue;
}
function returnObjectFromMeasurements(element, text) {
var obj = {},
range = text.replace(/["'”″]/g, '').split('-'),
rational;
if (range.length > 1)
rational = eval(range[0]) + eval(range[1]);
else
rational = eval(range[0]);
obj.rationalValue = rational;
obj.element = element;
return obj;
}
(function run(){
var tableVars = [],
tableElements = [];
var $tr = $("table#trg tr.trg-variations");
$tr.each(function (index) {
var $this = $(this);
tableVars[index] = returnObjectFromMeasurements(this,
$this.children('td').first().text()
);
});
tableVars.sort(sortByRationalValue);
$.each(tableVars, function (index, value) {
tableElements[index] = value.element;
});
$('#trg tbody').html(tableElements).find('tr:odd').addClass('odd');
}());

Categories