We Keep Coding

Change the TD value inside a particular Div Tag inside using jQuery

I have the following HTML Table,
<table id="items">
<tr class="total_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value" id="total"><div id="totalone">$875.00</div></td>
</tr>
<tr class="disc" id="disc">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Discount</td>
<td class="total-value" id="discount"><div id="discountid"><input type="text" name="disco" class="dis"/></div> </td>
</tr>
<tr class="tax_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">tax</td>
<td class="total-value" id="tax"><div id="tax">00</div></td>
</tr>
</table>
When i click on the button with id Discount, I need to change the value to the TD inside the div Tag with id "total" and set its value to another JavaScript variable?I tried the following, but it's not working.
$(".discountbtn").click(function(){
var test=$("#items #disc .dis").val(); //Easiest method
console.log("lol");
console.log(test);
var tot = roundNumber(test,2);
var new_tot=window.finale-tot;
console.log(window.finale);
console.log(new_tot);
$('#items #totalone').html("$"+new_tot);
//alert("button");
});

Try with my code that help you
change HTML <div id="totalone">$875.00</div> to $<span id="totalone">875.00</span>
$(document).ready(function() {
$("#discountbtn").click(function(){
var test=$("#items #disc .dis").val();
console.log(test);
var oldTotal = $("#totalone").text();
console.log(oldTotal);
var tot = Math.round(test * 100) / 100;
var new_tot=parseFloat(oldTotal)-tot;
console.log(new_tot);
$('#items #total').html(new_tot); //It was a jQuery selector glitch.
});
});

$('#items #totalone').html("$"+new_tot);

How to pass value using a tag to another page?

how can i get the h1 value and td values when a tag is clicked to another page?
<table>
<tr>
<td>
<h1>Book 1</h1>
</td>
</tr>
<tr>
<td>Chapter 1</td>
<td>100 pages</td>
<td></td>
</tr>
</table>

The data can be traversed between pages using GET or POST. If using GET , you need to pass the data as query string parameterusing jQuery/javascript and receive it at the other end.
If using POST you need to submit the form and retrieve the same on the next Page

You need to give those tags an ID and then use JavaScript to get their value and create a link.
<table>
<tr>
<td>
<h1 id="header">Book 1</h1>
</td>
</tr>
<tr>
<td id="val1">Chapter 1</td>
<td id="val2">100 pages</td>
<td><a id="link" href="newpage.html">Submit >></a></td>
</tr>
</table>
<script>
function generateLink() {
var query = "h1=" + encodeURIComponent(document.getElementById("header").innerHTML)
+ "&val1=" + encodeURIComponent(document.getElementById("val1").innerHTML)
+ "&val2=" + encodeURIComponent(document.getElementById("val2").innerHTML);
document.getElementById("link").href = "newpage.html?" + query;
}
generateLink();
</script>

Catch element by class using index or eq in jquery

HTML code:
<table border='1' cellpadding='5'>
<tr>
<td class="order">two</td>
<td>demo</td>
<td>last</td>
</tr>
<tr>
<td>two</td>
<td class="order">three two</td>
<td>sample</td>
</tr>
<tr>
<td>two</td>
<td class="order">five two</td>
<td>sample</td>
</tr>
<tr>
<td>five</td>
<td>quick</td>
<td class="order">nine</td>
</tr>
</table>
jQuery code:
$('.order').click(function(){
var index = $(this).index();
var text = $(".order:eq(index-1)").text();
alert(text);
});
On clicking any order class I want to get previous or next element with same order class. What iswrong with my code.
Here is my Fiddle
Thank you.

index is a variable so you have to add it to the string in jQuery like:
$(".order").click(function() {
var index = $(".order").index(this);
var text = $(".order:eq("+(index-1)+")").text();
alert(text);
});
DEMO

You need to find the index based on the collection set
var $orders = $('.order').click(function () {
var index = $orders.index(this);
if (index > 0) {
var text = $orders.eq(index - 1).text();
alert(text);
}
});
Demo: Fiddle

There are two problems with that code:
First, that form of index will tell you the index of the element relative to its siblings, not relative to other elements with the same class. So with your HTML, it'll always be 1 because all of your .order elements are the second child in their parent.
The second thing is that this line:
var text = $(".order:eq(index-1)").text();
...uses index literally, it doesn't swap in the value of your index variable.
You're on the right track with index, though, you just use a different form of it:
var orders = $(".order");
var index = orders.index(this);
Then rather than build a selector that jQuery can't hand off to the browser (because it uses a jQuery-specific :eq selector), use the eq function:
var text = orders.eq(index - 1).text();
But you'll want to handle the case where there is no previous element as well, perhaps:
var text = index > 0 ? orders.eq(index - 1).text() : "default text";
Live example:
$('.order').click(function(){
var orders = $(".order");
var index = orders.index(this);
var text = index > 0 ? orders.eq(index - 1).text() : "default text";
alert(text);
return false;
});
<table border='1' cellpadding='5'>
<tr>
<td class="order">two</td>
<td>demo</td>
<td>last</td>
</tr>
<tr>
<td>two</td>
<td class="order">three two</td>
<td>sample</td>
</tr>
<tr>
<td>two</td>
<td class="order">five two</td>
<td>sample</td>
</tr>
<tr>
<td>five</td>
<td>quick</td>
<td class="order">nine</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jQuery Each Loop Not updating HTML in variable

I have a variable html that stores HTML:
<tr class="odd">
<td class="charge1">0</td>
<td class="nc1">0</td>
</tr>
<tr class="even">
<td class="charge2">0</td>
<td class="nc2">0</td>
</tr>
<tr class="odd">
<td class="charge3">250</td>
<td class="nc3">0</td>
</tr>
Basically I need to add the values for the td with the class starting with charge to the values for the td with the class starting with nc and replace the value in the td with class starting with nc with the sum. The values in both td's in each row could change, so the code needs to be dynamic. So for this example, the resulting HMTL in the variable should be:
<tr class="odd">
<td class="charge1">0</td>
<td class="nc1">0</td>
</tr>
<tr class="even">
<td class="charge2">0</td>
<td class="nc2">0</td>
</tr>
<tr class="odd">
<td class="charge3">250</td>
<td class="nc3">250</td>
</tr>
In this example, the only row that actually changes is the third row. The td starting with class nc now shows 250 instead of the original 0.
I have to use the variable html later in the code with the updated td information if it did change.
This is the code that I have, but it's not working:
var html = $('#chargetable').html();
console.log(html);
$('[class*=nc]', html).each(function(){
var ncamount = $(this).html();
var chargeamount = $(this).parents('tr').find('[class*=charge]').html();
var totalnc = parseFloat(chargeamount) + parseFloat(ncamount);
$(this).html(totalnc);
console.log(chargeamount + ' ' + ncamount + ' ' + totalnc);
});
console.log(html);
This is the results of the console's log:
<tr class="odd">
<td class="charge1">0</td>
<td class="nc1">0</td>
</tr>
<tr class="even">
<td class="charge2">0</td>
<td class="nc2">0</td>
</tr>
<tr class="odd">
<td class="charge3">250</td>
<td class="nc3">0</td>
</tr>
0 0 0
0 0 0
250 0 250
<tr class="odd">
<td class="charge1">0</td>
<td class="nc1">0</td>
</tr>
<tr class="even">
<td class="charge2">0</td>
<td class="nc2">0</td>
</tr>
<tr class="odd">
<td class="charge3">250</td>
<td class="nc3">0</td>
</tr>
The html variable isn't being updated, but I can't for the life of me figure out how to get it to update, short of splitting the variable, replacing the td with class nc, and recreating the html variable on each iteration. I'm thinking there's got to be a better way to do this.
Any help is very much appreciated.

The problem with you code is that you cannot use html variable in this line
$('[class*=nc]', html)
the second parameter is used to define scope in which jQuery searches for the selector.
So, like document,parent.document(if its iframe etc..)
If you need the original dom you can use jQuery .clone() to store the original dom like this
//if you require the original code for later clone it
var htmlclone = $('#chargetable').clone().html();
console.log(htmlclone);
$('#chargetable [class*=nc]').each(function(){
var ncamount = $(this).html();
var chargeamount = $(this).parents('tr').find('[class*=charge]').html();
var totalnc = parseFloat(chargeamount) + parseFloat(ncamount);
$(this).html(totalnc);
console.log(chargeamount + ' ' + ncamount + ' ' + totalnc);
});
console.log(htmlclone);
Here is a fiddle http://jsfiddle.net/z4n7kjcf/

$(function () {
var $chargeTable = $("#chargetable");
var $chargeTableCloned = $chargeTable.clone();
var $chargeTableRows = $("tr", $chargeTableCloned);
$.each($chargeTableRows, function(i, $tr){
var $tdCharge = $("td[class^='charge']", $tr);
var $tdNc = $("td[class^='nc']", $tr);
var charge = parseInt($tdCharge.text(), 10);
var nc = parseInt($tdNc.text(), 10);
$tdNc.text(charge + nc);
});
$chargeTable.after($chargeTableCloned);
});
Example

Jquery Clone() and replace text

I have an big table I need to create multiple times in the same page, but I'm not sure have to do. I thought the easiest way is to have the table as an partial view hidden on the page, and each time I need it I will clone it from my jQuery code. I know have to clone it, but I'm not sure have to insert the text into the specific span's, before I insert it.
This is a small example of my table. Can somebody help me with this problem
< div id="ToClone">
<table >
<tr>
<td>
<table>
<tr><td><b>MMS_RepairLabel:</b></td><td align="right"><span id="RepairId"></span></td></tr>
<tr><td><b>MMS_MWTLabel:</b></td><td align="right"><span id="MWT"></span></td></tr>
<tr><td><b>MMS_MDTLabel:</b></td><td align="right"><span id="MDT"></span></td></tr>
</table>
</td>
</tr>
</table>
</div>
<script>
var History = (function () {
$(function () {
var tblClone = $("#ToClone").clone();
});
}());
</script>

You will need to resolve the problem of duplicate ids first. I suggest changing them to classes.
I recommend a little trick of using a dummy script block for your template. This is great for maintenance and browsers just ignore the unknown type so you can insert any elements:
<script id="ToClone" type="text/template">
<table>
<tr>
<td>
<table>
<tr>
<td><b>MMS_RepairLabel:</b>
</td>
<td align="right"><span class="RepairId"></span>
</td>
</tr>
<tr>
<td><b>MMS_MWTLabel:</b>
</td>
<td align="right"><span class="MWT"></span>
</td>
</tr>
<tr>
<td><b>MMS_MDTLabel:</b>
</td>
<td align="right"><span class="MDT"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</script>
Then clone with your inserted values like this:
var $clone = $($('#ToClone').html());
$('.RepairId', $clone).text(repairIdValue);
$('.MDT', $clone).text(mdtValue);
$('.MWT', $clone).text(mwtValue);
// Do something with the clone
JSFiddle: http://jsfiddle.net/TrueBlueAussie/381ugdvr/1/

If i can get what you are looking for, look this solution:
jQuery:
$('.pasteTable').each(function(){
var RepairId = $(this).data('repair-id');
var MWT = $(this).data('mwt');
var MDT = $(this).data('mdt');
$(this).html('<table><tr><td><b>MMS_RepairLabel:</b></td><td align="right"><span class="RepairId">' + RepairId + '</span></td></tr><tr><td><b>MMS_MWTLabel:</b></td><td align="right"><span class="MWT">' + MWT + '</span></td></tr><tr><td><b>MMS_MDTLabel:</b></td><td align="right"><span class="MDT">' + MDT + '</span></td></tr></table>');
});
Anywhere in your code you want the table to be cloned, just insert a with 'data' attributes:
HTML:
<div class="pasteTable" data-repair-id="#1" data-mwt="baby" data-mdt="ball"></div>
Demo:
http://jsfiddle.net/zf09m0at/3/