Develop Reference

Wrong Result Calculate value with checkbox use Jquery

Now im doing some Calculate Checkbox Value Using JQuery and PHP code. The mechanism is, when User checked the checkbox, it will sum the price. I implemented a formula for JQuery but the result it not correct. here is my code
JQUERY
<script>
$(function() {
$('.dealprice').on('input', function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
</script>
for more detail. i made a sample on this site https://repl.it/#ferdinandgush/Sum-Calculate-checkbox just click "run" button and you can able to test it. i need to display correct calculate following that table format
Please help.

You just have to define getItemPrice inside the loop, otherwise you are calculating it only once for the item that was clicked, instead of doing it for every item.
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][0]"></td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][1]"></td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][2]"></td>
</tr>
<tr>
<td class="tg-amwm" colspan="2">Total</td>
<td class="tg-0lax"><span id="totalDeal">0</span></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You have to put the getItemPrice inside of the function of where you get its checked. Please check the following code:
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
Also check this repl https://repl.it/repls/LavenderAgonizingRoot

add values in a textarea using a add button & it should be displayed in other textarea appended in a new row

How to add values in a textarea using a add button & that values should be displayed in other textarea using HTML5
<script src="http://code.jquery.com/jquery-1.11.3.min.js">
jQuery('#constraint_btn').click(function(){
var newVal = jQuery('#consEditor_txtarea').attr('value');
jQuery('#new_html').show();
jQuery('#new_consEditor_txtarea').attr('value',newVal);
});
</script>
<table>
<tr>
<td valign="top"><label>Constarint Editor </label></td>
<td><textarea id="consEditor_txtarea"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="" id="constraint_btn" value="Add Constraint" /></td>
</tr>
<tr id="new_html">
<td><label>Added Constraints </label></td>
<td><textarea id="new_consEditor_txtarea"></textarea></td>
</tr>
</table>

You need to close the script tags with the src and start a new script tag - if there is a src attribute, then you cannot have content inside the script
You need https (and preferably update the jquery to a newer version) in the jQuery source
You did not call the fields the same in the code as in the HTML
You need to execute the code after the page has loaded or the fields rendered - here I wrapped in the $(function() {}) load event handler
#new_html {
display: none;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$('#constraint_btn').click(function() {
let oldVal = $('#consEditor_txtarea').val().trim();
let newVal = $('#new_consEditor_txtarea').val().trim();
const vals = newVal.split("\n").filter(item => item);
if (oldVal) vals.push(oldVal);
$('#consEditor_txtarea').val(""); // remove
$('#new_html').show();
$('#new_consEditor_txtarea').val(vals.join("\n"));
});
});
</script>
<table>
<tr>
<td valign="top"><label>Constraint Editor </label></td>
<td><textarea id="consEditor_txtarea"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="" id="constraint_btn" value="Add Constraint" /></td>
</tr>
<tr id="new_html">
<td><label>Added Constraints </label></td>
<td><textarea id="new_consEditor_txtarea"></textarea></td>
</tr>
</table>

Check table values when loading html page with jQuery

I have recently started to use jQuery and I would like a little help, on a function that I would like to implement, in practice I have a html table in which for each row there is the course, professor, day, hour, status and a button to cancel my reservation, I initially created a small function in which when I click the button it changes the value of STATUS from ACTIVE to CANCEL and then through a post sends data to the server.
This is my code - I'm using a jsp page and I fill the columns using jstl
$(document).on('click', '.table-remove', function(e){
var row = $(this).closest('tr');
$(this).prop("disabled",true);
var col1=row.find('td:eq(0)').text();
var col2=row.find('td:eq(1)').text();
var col3=row.find('td:eq(2)').text();
var col4=row.find('td:eq(3)').text();
var col5=row.find('td:eq(4)').text();
var sessionValue= $("#hdnSession").data('value');
$.post("Serverlet_prenotazioni_disdette",{corso:col1,professore:col2,giorno:col3,ora:col4,stato:col5,user:sessionValue},
function(data){
row.find('td:eq(4)').html('Disdetta');
alert(data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive-md table-hover text-center" id="table">
<tr style="background-color:#17a2b8;color:white">
<th class="text-center">Utente</th>
<th class="text-center">Corso</th>
<th class="text-center">Professore</th>
<th class="text-center">Giorno</th>
<th class="text-center">Ora</th>
<th class="text-center">Stato</th>
<th class="text-center"> </th>
</tr>
<tr>
<c:forEach var = "rip" items = "${prenotazioni}">
<tr>
<td id="account" class="pt-3-half" contenteditable="false" name="account"><c:out value = "${rip.getAccount().getNickname()}"/></td>
<td id="corso" class="pt-3-half" contenteditable="false" name="corso"><c:out value = "${rip.getRipetizione().getCorso().getNome_Corso()}"/></td>
<td id="professore" class="pt-3-half" contenteditable="false" name="professore"><c:out value = "${rip.getRipetizione().getProfessore().getCognome()}"/></td>
<td id="giorno" class="pt-3-half" contenteditable="false" name="giorno"><c:out value = "${rip.getGiorno()}"/></td>
<td id="ora" class="pt-3-half" contenteditable="false" name="ora"><c:out value = "${rip.getOra()}"/></td>
<td id="stato" class="pt-3-half" contenteditable="false" name="stato"><c:out value = "${rip.getStato()}"/></td>
<td>
<span id="table-remove" class="table-remove"><button type="button" id="button-d" class="btn btn-success" >Prenota</button></span>
</td>
</tr>
</c:forEach>
I would like to make a function in which at the time of loading the page analyzes the STATUS column and where it finds "Deleted" I must disable the button and change the color of the text "Canceled" from black to red, while where State has value "Activate" he must do nothing
I tried to do this function
$(document).load('.table-remove',function(){
var row = $(this).closest('tr');
var text=row.find('td:eq(4)').text();
if(text==="Disdetta"){
$(this).prop("disabled",true);
}
});
but doing so no longer works

Here is a reduced example showing how you can do:
// on load...
$(document).ready(function() {
// ...for each row...
$('tbody tr').each(function() {
var $statusCell = $(this).find('td:first-child');
// ...get status
var status = $statusCell.text();
// if status is "Deleted"...
if (status === 'Deleted') {
// ...disable button...
$(this).find('button').prop('disabled', true);
// ...and change text color
$statusCell.css('color', 'red');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Deleted</td>
<td>
<button>Do something</button>
</td>
</tr>
<tr>
<td>Other status</td>
<td>
<button>Do something</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Show rows in table with cells name attribute containing string from input (JQuery)

I would like to have keyup function that would show only rows matching the input text by cell that spans on multiple rows.
Consider following table:
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1'> dummy1 </td>
</tr>
<tr>
<td name='Key1'> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2'> dummy3 </td>
</tr>
<tr>
<td name='Key2'> dummy4 </td>
</tr>
</table>
jsfiddle
Here each row has second td tag with name that matches its "parent" column text. So when I type 'Key1' at the input field I would like it to show only dummy1 and dummy2. Is it possible in jquery?

I understand that you want to display the rows that has a matching name. If this is wrong, please elaborate more, then I can update it.
Here is a demo: https://jsfiddle.net/erkaner/gugy7r1o/33/
$('input').keyup(function(){
$('tr').hide();
$("td").filter(function() {
return $(this).text().toLowerCase().indexOf(keyword) != -1; }).parent().show().next().show();
});
});

Here's my take on your issue, assuming you always want the first column to show. https://jsfiddle.net/gugy7r1o/2/
<input type="text" id="myInput" />
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1' class="data"> dummy1 </td>
</tr>
<tr>
<td name='Key1' class="data"> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2' class="data"> dummy3 </td>
</tr>
<tr>
<td name='Key2' class="data"> dummy4 </td>
</tr>
</table>
.data{
display:none;
}
var theData = $('td.data');
var input = $('#myInput').on('keyup', function(){
theData.hide();
var value = input.val();
var matches = theData.filter('[name="'+value+'"]');
matches.show();
});

Firstly, I would recommend using <ul> to wrap each key in as tables should be used for data structure (Forgive me if that is what it is being used for).
Secondly, just attach an on keyup event to the search box and then find matches based on the id. See example below:
JS Fiddle Demo
It is also worth mentioning that it could be useful attaching a timeout to the keyup event if you end up having large amounts of rows so that only one filter is fired for fast typers!

Selecting content with JQuery

Any ideas why this doesn't work?
http://jsfiddle.net/zk4pc/2/
I'm trying to get it so that everytime there is an element with the class "insert_name", the name is printed from the table.
Could you also help me make the selection more advanced (for instance only using the data from the first tr in the "client-profile" class?
Thanks!
HTML
<body onload="printMsg()">
<div id="api_data" style="display:none;">
<div class="client-profile">
<div class="head icon-5">Customer Details</div>
<table id="client-information">
<tbody>
<tr>
<td class="left">Name:</td>
<td class="color">Matthew Tester
</td>
</tr>
<tr class="dark">
<td class="left">E-mail:</td>
<td class="color">asdfg</td>
</tr>
<tr>
<td class="left">Registration:</td>
<td class="color">2013-11-21</td>
</tr>
<tr class="dark">
<td class="left">Status:</td>
<td class="color"><span class="active">Active</span>
</td>
</tr>
<tr>
<td class="left">Last Login Time:</td>
<td class="color" title="2014-05-28 11:43:46">1 hour ago</td>
</tr>
<tr class="dark">
<td class="left">Last Login From:</td>
<td class="color">123.123.123.123</td>
</tr>
<tr>
<td class="left">Location:</td>
<td class="color">United Kingdom</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="insert_name"></div>
</body>
Javascript
(function printMsg() {
var node = document.getElementsByClassName('insert_name');
node.innerHTML = $('[class*="color"]').eq(0).text();
})();

jsFiddle Demo
The issue is with your node selection. When you select by class name it returns an array of elements. Since you are only looking for the div with that class name, access the first index to reference it.
var node = document.getElementsByClassName('insert_name')[0];
edit
To make this iterate all of the nodes you could take this approach
var nodes = document.getElementsByClassName('insert_name');
var text = $('[class*="color"]').eq(0).text();
for(var i = 0; i < nodes.length; i++){
nodes[i].innerHTML = text;
}
Alternatively, since jQuery is already included, you could remove the body's onload event and just use this
jsFiddle Demo
$(function(){
$('.insert_name').html($('[class*="color"]').eq(0).text());
});
To ensure this only acts on the client-profile class the selector would be
$('.insert_name').html($('.client-profile [class*="color"]').eq(0).text());

If you are just trying to insert the name rather than all of the content, this should do the trick:
$(function() {
$('.insert_name').text($('td:contains("Name:")').next().text());
});
Here is the fiddle:
http://jsfiddle.net/b8LKQ/
Hope that helps!

I added a little more jQuery:
$(function() {
$('[class*="color"]').each(function(){
$('.insert_name').append($(this).text());
});
});
http://jsfiddle.net/zk4pc/7/
Hope that helps!