We Keep Coding

How to hide a table row or result if checkbox is checked AND if 0 result/count

I have this counter for word occurrence in the textarea. The problem is, I have a lot of items in the table, and so it can be distracting to include the zero results.
So what I'm hoping to achieve is, if the user checks the checkbox, it will not show the zero results anymore (preferably the whole row)..
Please see the code so far:
let textarea = $('#textarea3');
textarea.on('keyup', _ => counting());
function counting() {
var searchText = $('#textarea3').val();
let words = [];
words['1 sample'] = '#one';
words['2 sample'] = '#two';
words['3 sample'] = '#three';
words['4 sample'] = '#four';
words['5 sample'] = '#five';
words['6 sample'] = '#six';
for (const word in words) {
var outputDiv = $(words[word]);
outputDiv.empty();
let count = searchText.split(word).length - 1;
searchText = searchText.replaceAll(word,'');
outputDiv.append('<a>' + count + '</a>');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox">
<label> Don't show zero results</label><br>
<button onclick="counting();">Count</button>
<table>
<thead>
<tr>
<th scope="col">Items</th>
<th scope="col">Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 sample</td>
<td><a id="one"></a></td>
</tr>
<tr>
<td>2 sample</td>
<td><a id="two"></a></td>
</tr>
<tr>
<td>3 sample</td>
<td><a id="three"></a></td>
</tr>
<tr>
<td>4 sample</td>
<td><a id="four"></a></td>
</tr>
<tr>
<td>5 sample</td>
<td><a id="five"></a></td>
</tr>
<tr>
<td>6 sample</td>
<td><a id="six"></a></td>
</tr>
</tbody>
</table>
<textarea id="textarea3" rows="5">
1 sample
2 sample
3 sample
5 sample
</textarea>
If the checkbox isn't checked, it should function as is and still show all results.
I've seen this post but I'm not really sure how to implement it to my own project. Show or hide table row if checkbox is checked
Thank you in advance for any help.

Consider the following.
$(function() {
var textarea = $('#textarea3');
var words = [];
$("table tbody tr").each(function(i, row) {
words.push({
term: $("td:eq(0)", row).text().trim(),
rel: "#" + $("a", row).attr("id"),
count: 0
});
});
function count() {
var searchText = textarea.val();
$.each(words, function(i, word) {
if (searchText.indexOf(word.term) >= 0) {
var re = new RegExp('(' + word.term + ')', 'gi');
word.count = searchText.match(re).length;
$(word.rel).html(word.count);
} else {
word.count = 0;
if (!$("#noShowZero").is(":checked")) {
$(word.rel).html(word.count);
} else {
$(word.rel).html("");
}
}
});
}
textarea.keyup(count);
$("#count-btn, #noShowZero").click(count);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="noShowZero" type="checkbox">
<label> Don't show zero results</label><br>
<button id="count-btn">Count</button>
<table>
<thead>
<tr>
<th scope="col">Items</th>
<th scope="col">Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 sample</td>
<td>
<a id="one"></a>
</td>
</tr>
<tr>
<td>2 sample</td>
<td>
<a id="two"></a>
</td>
</tr>
<tr>
<td>3 sample</td>
<td>
<a id="three"></a>
</td>
</tr>
<tr>
<td>4 sample</td>
<td>
<a id="four"></a>
</td>
</tr>
<tr>
<td>5 sample</td>
<td>
<a id="five"></a>
</td>
</tr>
<tr>
<td>6 sample</td>
<td>
<a id="six"></a>
</td>
</tr>
</tbody>
</table>
<textarea id="textarea3" rows="5">
1 sample
2 sample
3 sample
5 sample
</textarea>
When the User:
Enters text in the textbox
Clicks the checkbox
Clicks the Button
then count function is executed.
Count will review all the words and look for specific keywords. A count of them is also retained, as well as element relationship to show that count.
Using Regular Expressions, we can search for the words in the text and count them using .match(). It returns an Array of the matches. You could also use .replace(), to remove them.

How can this be solved and to get numbers?

var tada =document.querySelectorAll("#element > table tr:nth-child(n+0) td:nth-child(1)")[0].outerText
this gains first
var tada =document.querySelectorAll("#element > table tr:nth-child(n+0) td:nth-child(1)")[1].outerText
This kind of text how can it be changed to fit all the values?
How do I change [0].outerText
0 to all numbers?
or how to get only the first number from the picture (console.log)
They just need to get those first numbers the code of the page looks like this
http://jsfiddle.net/8cuagzjd/1/
and yet how to calculate all array?

This is my approach,
There is a NaN element that I didn´t know if you want to remove or remain there.
The code split the td tag and get the last part (after the div). Then just parseInt() the value and you will get the number.
As a result you will get an array with the numbers.
//just commented this for tests purpose
//var tada = Array.from(document.querySelectorAll("#element > table tr:nth-child(n+0) td:nth-child(1)"));
var tada = Array.from(document.querySelectorAll("table tr:nth-child(n+0) td:nth-child(1)"));
let numbers = [];
tada.forEach(e => {
let num = parseInt(e.innerHTML.split("</div>")[1]);
//to avoid adding Nan
if (!isNaN(num)) numbers.push(num);
});
let sum = numbers.reduce((a, b) => a + b, 0);
console.log(sum);
<div class="trainqueue_wrap" id="trainqueue_wrap_barracks">
<table class="vis" style="width: 100%">
<tbody>
<tr>
<th style="width: 25%">Výcvik</th>
<th>Trvání</th>
<th>Zhotovení</th>
<th style="width: 150px">Ukončení *</th>
<th style="background:none !important; width: 2%"></th>
</tr>
<tr class="lit">
<td class="lit-item">
<div class="unit_sprite unit_sprite_smaller sword"></div>
19 Šermířů
</td>
<td class="lit-item"><span class="">0:00:37</span></td>
<td class="lit-item">dnes v 00:42:11 hodin</td>
<td class="lit-item"><a class="btn btn-cancel" onclick="return TrainOverview.cancelOrder(1645)" href="/">Storno</a></td>
<td class="lit-item" style="background:none !important;"></td>
</tr>
</tbody>
<tbody id="trainqueue_barracks">
<tr class="sortable_row" id="trainorder_0">
<td class="">
<div class="unit_sprite unit_sprite_smaller spear"></div>
20 Kopiníků
</td>
<td>0:00:32</td>
<td>dnes v 00:42:43 hodin</td>
<td><a class="btn btn-cancel" onclick="return TrainOverview.cancelOrder(1646)" href="/">Storno</a></td>
</tr>
<tr class="sortable_row" id="trainorder_1">
<td class="">
<div class="unit_sprite unit_sprite_smaller spear"></div>
20 Kopiníků
</td>
<td>0:00:32</td>
<td>dnes v 00:43:15 hodin</td>
<td><a class="btn btn-cancel" onclick="return TrainOverview.cancelOrder(1647)" href="/">Storno</a></td>
</tr>
<tr>
<td colspan="3"> </td>
<td class="lit-item">
<a class="evt-confirm btn btn-cancel nowrap" data-confirm-msg="Opravdu chceš zrušit veškerou rekrutaci?" href="">Zrušit vše</a></td>
<th style="background:none !important;"></th>
</tr>
</tbody>
</table>
</div>

How to change the background box based on input value in javascript

Here i'm trying to change the color based on value and rest of should be in white background, if input value is 1 then it should highlighted to red , if i changed the value to 4 then it should be highlighted in to red and rest of values 1 should be in white
I am still learning,Thanks in advance
<table>
<tr>
<td id="data1">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me"></button>
</body>
<script>
function myFunction(){
if(document.getElementById('valuesData').value >= '9'){
document.getElementById('data1').style.background='red'
}
else{
alert("value should not be greater than 9");
}
}
</script>

You could use data attributes to see which td has a value of the entered text. It will change the background of entered value td.
Also before applying the background red to the entered value we can check all the tds and clear them with white background.
All the value entered in an input are string format so we need to use parseInt function to make sure they are converted to integar.
Live Demo:
function myFunction() {
//Get input value and convert to int using parseInt
let value = parseInt(document.getElementById('valuesData').value)
//Clear all the td with white background
let allTds = document.getElementsByTagName('td');
for (let i = 0; i < allTds.length; i++) {
allTds.item(i).style.background = 'white'
}
//Apply red background to the entered td with matching data-id
let getTd = document.querySelector('[data-id="' + value + '"]');
if (value <= '9') {
getTd.style.background = 'red'
} else {
alert("value should not be greater than 9");
}
}
<table>
<tr>
<td data-id="1">1</td>
<td data-id="2">2</td>
<td data-id="3">3</td>
</tr>
<tr>
<td data-id="4">4</td>
<td data-id="5">5</td>
<td data-id="6">6</td>
</tr>
<tr>
<td data-id="7">7</td>
<td data-id="8">8</td>
<td data-id="9">9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()">Click me</button>

<body>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me"></button>
</body>
<script>
function myFunction(){
if(document.getElementById('valuesData').value >= 9){
document.getElementById('data1').style.background='red'
}
else{
alert("value should not be greater than 9");
}
}
</script>

You can get all tds and check if the user input matches with your td and based on you can change the color i.e. red and for rest of the tds make it white
function myFunction(){
var input = parseInt(document.getElementById('valuesData').value);
if(!isNaN(input) && input>=1 && input<=9)
document.getElementsByTagName('td')[input-1].style.background='red';
else
alert('invalid input')
let allTds = document.getElementsByTagName('td');
for(let i=0;i<allTds.length;i++){
if(i!==input-1){
allTds.item(i).style.background='white'
}
}
}
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me">Click</button>
</body>

function myFunction(){
const value= parseInt(document.getElementById('valuesData').value);
if( value<= 9){
const set=document.getElementsByClassName('data1')
for (item of set){
if(item.innerHTML==value){item.style.background='red'
}else item.style.background='white';
}
}
else{
alert("value should not be greater than 9");
}
}
<table>
<tr>
<td class="data1">1</td>
<td class="data1">2</td>
<td class="data1">3</td>
</tr>
<tr>
<td class="data1">4</td>
<td class="data1">5</td>
<td class="data1">6</td>
</tr>
<tr>
<td class="data1">7</td>
<td class="data1">8</td>
<td class="data1">9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me"></button>

This should fix it. There were a few errors originally:
You were comparing the string value of the input to the string value '9' - the input should either be changed from text to number, or you should use parseInt as I have. Note, that entering a non-numeric value will cause an error unless it is checked for, so it's better to change the input field's type to number - also, you should compare to the numeric value 9, rather than the string value '9'
Your conditional was actually the wrong way around - i.e. >= should be <= in this case
Updated:
function myFunction() {
var val = document.getElementById('valuesData').value;
document.querySelectorAll("table td").forEach(function(td) {
td.style.background = "";
})
if (document.getElementById('valuesData').value != "" && parseInt(document.getElementById('valuesData').value) <= 9) {
val = parseInt(val);
document.querySelectorAll("table td")[val - 1].style.background = 'red';
} else {
alert("value should be between 1 and 9");
}
}

Hide empty html table rows

Problem
I have a table with one or more empty rows. How to hide empty rows from the table?
For example
1 - John | Alfredo
2 - Mark | Zuck
3 - |
4 - Carl | Johnson
In this case, I'd like to delete the third row.
Step Tried
I found how to delete a specific row, what about deleting all the empty rows?
deleteEmptyRows();
function deleteEmptyRows() {
var myTable = document.getElementById("myTable")
var rowToDelete = 2;
myTable.deleteRow(rowToDelete)
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
<tbody>
<tr>
<td>John</td>
<td>Alfredo</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuck</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Carl</td>
<td>Johnson</td>
</tr>
</tbody>
</table>

This is how you can dynamically hide empty table rows with javascript.
deleteEmptyRows();
function checkIfCellsAreEmpty(row) {
var cells = row.cells;
var isCellEmpty = false;
for(var j = 0; j < cells.length; j++) {
if(cells[j].innerHTML !== '') {
return isCellEmpty;
}
}
return !isCellEmpty;
}
function deleteEmptyRows() {
var myTable = document.getElementById("myTable");
for(var i = 0; i < myTable.rows.length; i++) {
var isRowEmpty = checkIfCellsAreEmpty(myTable.rows[i]);
if (isRowEmpty) {
myTable.rows[i].style.display = "none";
}
}
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
<tbody>
<tr>
<td>John</td>
<td>Alfredo</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuck</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Carl</td>
<td>Johnson</td>
</tr>
</tbody>
</table>

Here, a simple method for row is empty (this allows us to check for other conditions easily later).
Loop over rows and call remove if empty.
const rowIsEmpty = (tr) => Array.from(tr.querySelectorAll('td')).every(td => td.innerText === "");
deleteEmptyRows();
function deleteEmptyRows() {
var myTable = document.getElementById("myTable");
myTable.querySelectorAll('tr').forEach(tr => {
if(rowIsEmpty(tr)) tr.remove();
});
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
<tbody>
<tr>
<td>John</td>
<td>Alfredo</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuck</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Carl</td>
<td>Johnson</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Was answered in another thread.
Jquery: hiding empty table rows
Loops through all table tr rows, and checks td lengths. If the td length is empty will hide.
$("table tr").each(function() {
let cell = $.trim($(this).find('td').text());
if (cell.length == 0){
console.log('Empty cell');
$(this).addClass('nodisplay');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
</tr>
<tr>
<!-- Will hide --> <td></td>
</tr>
</table>

With native Javascript:
function removeRow(src) {
var tableRows = document.getElementById(src).querySelectorAll('tr');
tableRows.forEach(function(row){
if((/^\s*$/).test(row.innerText)){
row.parentNode.removeChild(row);
}
});
}
removeRow('myTable');
The only problem is when you have some other characters in the row, except the whitespaces. This regex checks for blank characters, but if u have a dot inside or any other non empty character, it will fail.

Calculate quantity where textbox is a certain value

Edit
So many good answers and all of them work! Thanks a lot guys :) I wish I could mark all of them as solved!
----
Good day
Let's say I have these 2 text inputs:
<input type="text" id="plt_quantity_sum"/> <!-- this should calculate the "#quantity" where each "#uom_value" is "PLT" -->
<input type="text" id="crt_quantity_sum"/><!-- this should calculate the "#quantity" where each "#uom_value" is "CRT" -->
Let's assume the following scenario:
<table>
<tbody>
<tr>
<th>Item Name</th>
<th id="uom_value">UOM</th>
<th id="qty">Quantity</th>
</tr>
<tr>
<td>Item 1</td>
<td id="uom_value">PLT</td>
<td id="qty">5</td>
</tr>
<tr>
<td>Item 2</td>
<td class="uom_value">PLT</td>
<td id="qty">3</td>
</tr>
<tr>
<td>Item 3</td>
<td id="uom_value">CRT</td>
<td id="qty">2</td>
</tr>
<tr>
<td>Item 4</td>
<td id="uom_value">CRT</td>
<td id="qty">3</td>
</tr>
</tbody>
</table>
<input type="text" id="plt_quantity_sum" />
<input type="text" id="crt_quantity_sum" />
What needs to happen:
When the document loads, or via a button click; the quantity of "#plt_quantity_sum" and "#crt_quantity_sum" should be calculated based on their respective quantities and "UOM" values.
Some Javascript I had in mind which should clarify what exactly needs to happen:
$(document).ready(function(){
if (document.getElementById("#uom_value").value == "PLT"){
document.getElementById("#plt_quantity_sum").value == (sum of #qty);
}
else if (document.getElementById("#uom_value").value == "CRT"){
document.getElementById("#crt_quantity_sum").value == (sum of #qty);
}
});
Thanks for reading and I would greatly appreciate any help.

You just need declare two variables crtQtySum and pltQtySum for the two sums and initialize them to 0, then loop over the tds and check if it's crt or plt and updtae your variables accordingly:
$(document).ready(function() {
var crtQtySum = 0;
var pltQtySum = 0;
$(".uom_value").each(function() {
if ($(this).text() === "CRT") {
crtQtySum += parseInt($(this).next("td.qty").text());
} else if ($(this).text() === "PLT") {
pltQtySum += parseInt($(this).next("td.qty").text());
}
});
$("#plt_quantity_sum").val(pltQtySum);
$("#crt_quantity_sum").val(crtQtySum);
});
$(document).ready(function() {
var crtQtySum = 0;
var pltQtySum = 0;
$(".uom_value").each(function() {
if ($(this).text() === "CRT") {
crtQtySum += parseInt($(this).next("td.qty").text());
} else if ($(this).text() === "PLT") {
pltQtySum += parseInt($(this).next("td.qty").text());
}
});
$("#plt_quantity_sum").val(pltQtySum);
$("#crt_quantity_sum").val(crtQtySum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Item Name</th>
<th class="uom_value">UOM</th>
<th class="qty">Quantity</th>
</tr>
<tr>
<td>Item 1</td>
<td class="uom_value">PLT</td>
<td class="qty">5</td>
</tr>
<tr>
<td>Item 2</td>
<td class="uom_value">PLT</td>
<td class="qty">3</td>
</tr>
<tr>
<td>Item 3</td>
<td class="uom_value">CRT</td>
<td class="qty">2</td>
</tr>
<tr>
<td>Item 4</td>
<td class="uom_value">CRT</td>
<td class="qty">3</td>
</tr>
</tbody>
</table>
PLT:<input type="text" id="plt_quantity_sum" readonly/></br>
CRT:<input type="text" id="crt_quantity_sum" readonly/>
Note:
I used readonly attribute with the inputs, as they're just used to display the sums so they can't be modified, but we could just used a block element for that like div or span.

You can try this code. I ve didnt test it.
var plt_count = 0;
var crt_count = 0;
$(".uom_value").each(function() {
if($(this).html === 'PLT'){
plt_count += parseInt($(this).closest('.qty').html());
}
if($(this).html === 'CRT'){
crt_count += parseInt($(this).closest('.qty').html());
}
});
$("#plt_quantity_sum").val(plt_count);
$("#crt_quantity_sum").val(crt_count);

Apart from correcting the spelling mistakes that Hamza pointed out, I'd say you should basically iterate through the elements given its class name document.getElementsByClassName('.someclass') and then store and sum the value of each one of its siblings with class '.qty'.
Then you take that value and use it to populate the input you want.
Hope that helps ;)

This can be done using so many method, this is one of them :
$(document).ready(function(){
var sum_PLT = 0, sum_CRT = 0;
$('table > tbody > tr').each(function() {
tr = $(this)[0];
cells = tr.cells;
if(cells[0].textContent != "Item Name"){//To exclude the <th>
if(cells[1].textContent == "PLT")
sum_PLT += parseInt(cells[2].textContent);
else
sum_CRT += parseInt(cells[2].textContent);
}
});
$("#plt_quantity_sum").val(sum_PLT);
$("#crt_quantity_sum").val(sum_CRT);
});
This is a working jsFiddle.

You might want to try this code.
<script>
$(document).ready(function(){
var plt_qty = 0;
var crt_qty = 0;
$('.uom_value').each(function(){
if ($(this).text() === 'PLT' ) {
plt_qty = plt_qty + parseInt($(this).parent().find('.qty').text());
}else if ($(this).text() === 'CRT' ) {
crt_qty = crt_qty + parseInt($(this).parent().find('.qty').text());
}
});
$("#plt_quantity_sum").val(plt_qty);
$("#crt_quantity_sum").val(crt_qty);
});
</script>
Note : remove class uom_value in <th class="uom_value">UOM</th>.