We Keep Coding

Foreach loops only through the last column of the table (ES6)

I was trying to build my first search function for a phonelist. Unfortunately it looks like, my filter function loops only trough the last column of the table.
Did i miss something? Or do i have to use a different approach for this?
PS: Pardon for the possible duplicate. All examples that i've found has been for PHP.
Many thanks in advance!
const phonelist = document.querySelector('table');
const searchInput = document.querySelector('#search');
const searchResult = document.querySelector('#search-result');
const searchValue = document.querySelector('#search-value');
// EVENTS
function initEvents() {
searchInput.addEventListener('keyup', filter);
}
function filter(e) {
let text = e.target.value.toLowerCase();
console.log(text);
// SHOW SEARCH-RESULT DIV
if (text != '') {
searchValue.textContent = text;
searchResult.classList.remove('hidden');
} else {
searchResult.classList.add('hidden');
}
document.querySelectorAll('td').forEach((row) => {
let item = row.textContent.toLowerCase();
if (item.indexOf(text) != -1) {
row.parentElement.style.display = 'table-row';
console.log(row.parentElement);
} else {
row.parentElement.style.display = 'none';
}
})
}
// ASSIGN EVENTS
initEvents();
<input id="search" />
<div class="phonelist">
<div id="search-result" class="hidden">
<p>Search results for <b id="search-value"></b>:</p>
</div>
<table class="striped">
<thead>
<tr>
<th>Phone</th>
<th>Fax</th>
<th>Room</th>
<th>Name</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>165</td>
<td>516</td>
<td>1.47</td>
<td>Johnathan Doe</td>
<td>Sales</td>
</tr>
<tr>
<td>443</td>
<td>516</td>
<td>1.47</td>
<td>Jane Dow</td>
<td>Development</td>
</tr>
</tbody>
</table>
</div>

it looks like you are querying the wrong element
document.querySelectorAll('td').forEach((row) => {
I think you want to be querying the row
document.querySelectorAll('tr').forEach((row) => {
otherwise you are of overriding your class changes with whatever is the result of the last column
(and obviously apply the class on the tr and not the parent of the tr)

Your code is actually going through all the elements but the changes from last column are overriding changes from previous columns.
Let's say you searched for dow, 2nd row 4th column is matched and shows the parent but after that your loop goes to 2nd row 5th column which doesn't match and hides the parent row.
I have updated your code, as shown below you should loop through the rows, check if any of its columns are matching and update the row only once based on the result.
const phonelist = document.querySelector('table');
const searchInput = document.querySelector('#search');
const searchResult = document.querySelector('#search-result');
const searchValue = document.querySelector('#search-value');
// EVENTS
function initEvents() {
searchInput.addEventListener('keyup', filter);
}
function filter(e) {
let text = e.target.value.toLowerCase();
console.log(text);
// SHOW SEARCH-RESULT DIV
if (text != '') {
searchValue.textContent = text;
searchResult.classList.remove('hidden');
} else {
searchResult.classList.add('hidden');
}
document.querySelectorAll('tr').forEach(row => {
let foundMatch = false;
row.querySelectorAll('td').forEach(col => {
let item = col.textContent.toLowerCase();
foundMatch = foundMatch || item.indexOf(text) > -1;
});
if (foundMatch) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
});
}
// ASSIGN EVENTS
initEvents();
<input id="search" />
<div class="phonelist">
<div id="search-result" class="hidden">
<p>Search results for <b id="search-value"></b>:</p>
</div>
<table class="striped">
<thead>
<tr>
<th>Phone</th>
<th>Fax</th>
<th>Room</th>
<th>Name</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>165</td>
<td>516</td>
<td>1.47</td>
<td>Johnathan Doe</td>
<td>Sales</td>
</tr>
<tr>
<td>443</td>
<td>516</td>
<td>1.47</td>
<td>Jane Dow</td>
<td>Development</td>
</tr>
</tbody>
</table>
</div>

How to dynamically change the price via incrementing the input number

I create my personal project, and I called this system as ordering system I used laravel for this and the front end javascript and jquery.
I have question
Question:
I used the append function of jquery to transfer value to other side. so i append input type number which the value automatically equal to 1
The question if I increment the value of input type number how the price double if i increase the value of number?
Example of my output
My Front end Codes:
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
//my logic to increment quantity but not working.
$("#qty_change").bind('keyup mouseup', function () {
alert("changed");
});
//function for getting the data from search product by clicking to the table row
$("tr#productClicked").click(function () {
//to get the price in tr
var price = $(this).closest("tr").find(".menu_price").text();
//to get the menu in tr
var menu_name = $(this).closest("tr").find(".menu_name").text();
//row count
var rowCount = $('table#myTable tr:last').index() + 1;
//append input to quantity the value is 1
var input = '<input type="number" name="qty_number" class="form-control" value="1" id="qty_change" />';
//Item must be editable
var contenteditable = 'contenteditable=true';
table.append('<tr><td>'+rowCount+'</td><td class="total">'+input+'</td><td '+contenteditable+'>'+menu_name+'</td><td>'+price+'</td><td>'+price+'</td></tr>');
});
Html Table:
<table class="table table-hover" id="myTable">
<thead>
<tr style="font-size: 14px; ">
<th scope="col">#</th>
<th scope="col">Qty</th>
<th scope="col">Item</th>
<th scope="col" style="text-align: right">Cost</th>
<th scope="col" style="text-align: right">Total</th>
</tr>
</thead>
<tbody style="font-size:14px;">
<tr>
{{-- <td>1</td>
<td>x 2</td>
<td contenteditable='true'>Feast Chicken</td>
<td align="right">$10.00</td>
<td align="right">$20.00</td> --}}
</tr>
</tbody>
</table>
New update:
$('.amount > input[type="number"]').on('input', updateTotal);
function updateTotal(e){
var value = e.target.value;
// Don't do anything if value is not valid
// else you will see NaN in result.
if (!value || value < 0)
return;
var $parentRow = $(e.target).parent().parent();
var $siblingTotal = $parentRow.find('.total');
var $siblingCost = $parentRow.find('.cost');
var cost = $siblingCost.text();
// parseInt and parseFloat because
// `value` and `cost` are strings.
value = parseInt(value);
cost = parseFloat(cost);
$siblingTotal.text(value * cost);
}
$("tr#productClicked").click(function () {
swal({
title: "Are you sure?",
text: "Once you will add it will automatically send to the cart",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
swal("Menu Added", "You clicked the button!", "success");
//to get the price in tr
var price = $(this).closest("tr").find(".menu_price").text();
//to get the menu in tr
var menu_name = $(this).closest("tr").find(".menu_name").text();
//row count
var rowCount = $('table#myTable tr:last').index() + 1;
//append input to quantity the value is 1
var input = '<input type="number" value="1">';
//Item must be editable
var contenteditable = 'contenteditable=true';
table.append('<tr><td>'+rowCount+'</td><td class="amount">'+input+'</td><td '+contenteditable+'>'+menu_name+'</td><td class="cost">'+price+'</td><td class="total">'+price+'</td></tr>');
} else {
swal("Cancelled");
}
});
});

Listen for "input" event using jQuery's .on.
(Please note that "input" event has nothing to do with jQuery, it's a native JavaScript thing.)
This is a sample code, because the code you provided is not complete. But you should be able to get the concept:
Usual code sample
$('.amount > input[type="number"]').on('input', updateTotal);
function updateTotal(e){
var amount = parseInt(e.target.value);
if (!amount || amount < 0)
return;
var $parentRow = $(e.target).parent().parent();
var cost = parseFloat($parentRow.find('.cost').text());
var total = (cost * amount).toFixed(2);
$parentRow.find('.total').text(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Input</th>
<th>Cost per item</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="amount"><input type="number" value="1"></td>
<td class="cost">27</td>
<td class="total">27</td>
</tr>
<tr>
<td class="amount"><input type="number" value="1"></td>
<td class="cost">14.50</td>
<td class="total">14.50</td>
</tr>
</tbody>
</table>
For the sake of understanding
// Get all inputs with type="number"
// that is a child of <td class="amount">.
var $amountInput = $('td.amount > input[type="number"]');
// Attach "input" event listener to the input fields
// so that we know when the value changes and handle the changes.
// In this case, the event handler is the function "updateTotal".
$amountInput.on('input', updateTotal);
function updateTotal(e){
// Get the `input` element that triggers this event.
var $thisInput = $(e.target);
// Get the value of $thisInput
var amount = $thisInput.val();
// The `value` is a string,
// so we need `parseInt` to make it a number.
// Use `parseInt` because quantity can't have decimals.
amount = parseInt(amount);
// Don't do anything if value is not valid
// else you will see NaN in result.
if (!amount || amount < 0)
return;
// Get the parent <tr> of this input field
var $parentRow = $thisInput.parent().parent();
// Find the <td class="total"> element
var $siblingTotal = $parentRow.find('.total');
// Find the <td class="cost"> element
var $siblingCost = $parentRow.find('.cost');
// Get the cost from <td class="cost"> element
var cost = $siblingCost.text();
// The "cost" is a string,
// so we need `parseFloat` to make it a number.
// Use `parseFloat` because cost can have decimals.
cost = parseFloat(cost);
// Calculate the total cost
var total = amount * cost;
// .toFixed(2) to force 2 decimal places
total = total.toFixed(2);
// Update the total cost into <td class="total"> element
$siblingTotal.text(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Input</th>
<th>Cost per item</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="amount"><input type="number" value="1"></td>
<td class="cost">27</td>
<td class="total">27</td>
</tr>
<tr>
<td class="amount"><input type="number" value="1"></td>
<td class="cost">14.50</td>
<td class="total">14.50</td>
</tr>
</tbody>
</table>
Note
If you still have difficulties understanding, you might want to read:
Why prefix "$" sign in only some variable names? (Generally called the Hungarian Notation)
What is td.amount > input[type="number"]?
What is jQuery's .on()?
What is e.target?
What is jQuery's .val()?
What is parseInt()?
What is parseFloat()?
What does !value mean?
Why do you return nothing?
What is jQuery's .parent()?
What is jQuery's .find()?
What is jQuery's .text()?
What is .toFixed()?

jQuery how to count elements that are hidden

I created a manual search functionality that displays the results as the user types. Here is the fiddle: https://jsfiddle.net/rtq4jfuq/1/
Here is the HTML
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<input style='width: 300px;' placeholder='search' id='search'>
<table border='1'>
<tr>
<th>Name</th>
</tr>
<tr class='names'>
<td>Bob</td>
</tr>
<tr class='names'>
<td>Ted</td>
</tr>
<tr class='names'>
<td>Steve</td>
</tr>
<tr class='names'>
<td>Sven</td>
</tr>
<tr class='names'>
<td>Magnus</td>
</tr>
</table>
Here is the script
$(document).ready(function() {
$("#search").keyup(function(){
var query = $(this).val();
$(".names").each(function(){
var n = $(this).children("td").html();
if (n.toUpperCase().includes(query.toUpperCase())) {
$(this).css("display", "");
}
else {
$(this).css("display", "none");
}
});
});
});
I want to display a message once there are no rows displayed but how do I check if there are no rows displayed?

Use the :visible filter so see if you've hidden all results:
$(document).ready(function() {
$("#search").keyup(function() {
var query = $(this).val();
$(".names").each(function() {
var n = $(this).children("td").html();
if (n.toUpperCase().includes(query.toUpperCase())) {
$(this).css("display", "");
} else {
$(this).css("display", "none");
// Check to see if all elements have been hidden
if (!$(".names:visible").length) {
// All element hidden, do something here
alert("no results");
}
}
});
});
});
EDIT
FYI - your code can be greatly simplified. This is a quick and dirty example - I'm sure that there's room for further improvement:
$(document).ready(function() {
$("#search").keyup(function() {
var query = $(this).val();
var matches = $(".names").filter(function() {
return $(this).children("td").html().toUpperCase().includes(query.toUpperCase())
}).show();
$(".names").not($(matches)).hide();
if (!$(".names:visible").length) {
$("#myTable").append("<tr class='noRecords'><td>No records found</td></tr>");
} else {
$(".noRecords").remove();
}
});
});
Here's a working fiddle.

I will suggest you that instead of adding/removing an inline CSS add/remove a class with display none, so you can find how much elements has that class and compare it againist of how much cells you have, if number matches you will know that is not displaying any cell

Partially search words in a TABLE with Jquery

I use Javascript to search within a HTML table column. However, I can only search a value by typing the first letters of the table cells content.
An example of my data is shown below.
If I search for the value 123 in column 2, the desired table cell pops up like it should.
If I search for the value 456 or 23 for example , nothing happens.
|column1|column2|
__________________
|000|123 456|
|001|123 456|
My current Javascript:
<script type="text/javascript">
$("#searchn").on("keyup", function() {
var value = $(this).val();
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td").children().eq(1).text();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
</script>

Your logic is flawed as indexOf() returns -1 if the value you're searching for is not found, and the zero-based index of the match if it was found. Because of this, your if statement is flawed as it excludes matches at the start of the value.
You should change your if condition to this instead:
if (id.indexOf(value) !== -1) {
$row.hide();
}
else {
$row.show();
}
Also note that you can shorten this by using filter() and toggle() instead:
$("#searchn").on("keyup", function() {
var value = $(this).val();
$("table tr:not(:first)").show().filter(function(index) {
return $(this).find("td:eq(1)").text().indexOf(value) == -1;
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr>
<td>000</td>
<td>123 456</td>
</tr>
<tr>
<td>001</td>
<td>123 456</td>
</tr>
</table>
<input id="searchn" />

How to detect a change in any <td> of table, using javascript?

I have a Table whose <td> values varies depending upon the inputs given in form, I am using Tangle to make a reactive document. Is it posible to detect if the value of <td>changes to any negative number? If so, then it must change its color to red!
Can Javascripting or html tags itself solve this problem?
Please help!
My change will be on profitLossIn1,profitLossIn2,profitLossIn3.
Here is my html:
<table>
<tr>
<th>Name</th>
<th>Cost</th>
<th>Revenue</th>
<th>Result Profit/Loss</th>
</tr>
<tr>
<td><input id='NameInn1' type='text' NAME="NameInn1"></td>
<td><span class="TKNumberField" data-var="CostIn1"></span></td>
<td><b data-var="revenueIn1"> Cost</b></td>
<td><b data-var="profitLossIn1"> dollars</b></td>
</tr>
<tr>
<td><input id='NameInn2' type='text' NAME="NameInn2"></td>
<td><span class="TKNumberField" data-var="CostIn2"></span></td>
<td><b data-var="revenueIn2"> Cost</b></td>
<td><b data-var="profitLossIn2"> dollars</b></td>
</tr>
<tr>
<td><input id='NameInn3' type='text' NAME="NameInn3"></td>
<td><span class="TKNumberField" data-var="CostIn3"></span></td>
<td><b data-var="revenueIn3"> Cost</b></td>
<td><b data-var="profitLossIn3"> dollars</b></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><b data-var="totalRevenueIn"> dollars</b></td>
</tr>
</table>
I am trying this:
var inputs = document.getElementById("profitLossOut1");
console.log(inputs.value);
inputs.onchange = function () {
console.log("Checking IF condition");
if ((parseInt(this.value)).match("-") == true) this.parentNode.style.background = "red";
};

maybe this can be helpful: http://jsfiddle.net/tz7WB/
JQUERY CODE
$(":input").on("change", function () {
if (parseInt($(this).val()) < 0) $(this).closest("td").css("background", "red");
})
try to type any negative number in the inputs
with pure js: http://jsfiddle.net/tz7WB/1/
JS CODE
var inputs = document.getElementsByTagName("input");
for (var x = 0; x < inputs.length; x++) {
inputs[x].onchange = function () {
if (parseInt(this.value) < 0) this.parentNode.style.background = "red";
};
}

Assuming I understand your question correctly, you don't want to check for negative values of the inputs, you want to check for negative values of the tangle-generated text values.
This code should be more of what you're looking for, and it works as long as the text content of your data-var elements starts with the number. If not, the number parsing logic will need to be improved:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").change(function(e) {
var $target = $(e.target);
var checkNeg = function(c) {
for(var i=0,$ci; i<c.length; i++) {
$ci = $(c[i]);
if(parseInt($ci.text()) < 0) $ci.css("color", "red");
else $ci.css("color", "black");
}
};
checkNeg($target.parents("table").find("[data-var]"));
});
});
</script>

Consider using knockout.js for your scenario, you can use it to easily format your UI elements according to the underlying data. Take a look at the examples: http://knockoutjs.com/examples/

Add jquery change events for each of input boxes . Below is sample code
$("#NameInn1").change(function(){
var input = $("#NameInn1").val();
if(input<10){
$("#NameInn1").css("background-color","red");
}
});