Develop Reference

How to check if the table has a class or not using hasClass function of jQuery?

I have a problem on the onclick function of table b the function does not determine if table A has a class of selected_upsize or not
Scenario:
Table B has a list of item and also in table A.
now when I click one of the items in Table B, the on click function will do the condition if table A has a class of selected_upsize or not, To make the scenario short.
if the table A has a class of (selected_upsize) then it will alert something, else the item of that I clicked in table B will append on table A.
I have here my output
I have here my function to my Onclick function
$(".customer_edit_table_chaining_condiments").on('click',function(e){
//this is the item of table B that will append if the table A has no class
var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();
$(".customer_edit_table_chaining_condiments").on('click',function(e){
//this is the item of table B that will append if the table A has no class
var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();
if($('#noun_chaining_order').find('tr.selected_upsize').length){
alert('You can"t upsize the item');
}else{
$('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
$('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');
}
})
My Html Table A
<table class="table table-hover upsize_check" id="noun_chaining_order" style="border:none;">
<thead>
<tr style="font-size: 15px; color:white;">
<th scope="col">Qty</th>
<th scope="col">Condiments</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody style="font-size:14px; color:white;" class="tbody_noun_chaining_order">
</tbody>
Table B
<table class="table table-striped table-bordered " id="customer_table_update_chain_order" style="width:100%">
<div class="content-noun" style="text-align: center;">
<thead>
<tr style="background: linear-gradient(-20deg, #00e4d0, #5983e8); color:white;" >
<th>Condiment Screen Name</th>
<th>Condiment Price</th>
<th>Condiment Image</th>
</tr>
</thead>
</div>
<tbody>
</tbody>

$(".customer_edit_table_chaining_condiments").on('click',function(e){
//this is the item of table B that will append if the table A has no class
var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();
//here will check if table A has selected upsize or not
//THE BELOw LINE WILL RETURN ALL THE ELEMENTS WITH SELECTED_UPSIZE CLASS IF WE HAVE .SELECTED_UPSIZE IN THE FIND METHOD, THUS THE BELOW LINE WILL ALWAYS BE TRUE
$('table#noun_chaining_order').find('.upsize_check').each(function(){
//INSTEAD IF YOU SEARCH FOR THE ELEMENTS WITH A DIFFERENT CLASS as in the above line of code, THAT MIGHT OR MIGHT NOT HAVE THE SELECTED_UPSIZE CLASS WITH IT, THEREFORE MAKING THE BELOW STATEMENTS LEGAL
if ($(this).hasClass('selected_upsize')) {
alert('You can"t upsize the item');
}
else
{
$('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
$('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');
}
});
});
ADDING THE SOLUTION BELOW....
HTML
<table class="table table-hover" id="noun_chaining_order" style="border:none;">
<thead>
<tr style="font-size: 15px; color:white;">
<th scope="col">Qty</th>
<th scope="col">Condiments</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody style="font-size:14px; color:white;" class="tbody_noun_chaining_order">
</tbody>
<table class="table table-striped table-bordered " id="customer_table_update_chain_order" style="width:100%">
<div class="content-noun" style="text-align: center;">
<thead>
<tr style="background: linear-gradient(-20deg, #00e4d0, #5983e8); color:white;" >
<th>Condiment Screen Name</th>
<th>Condiment Price</th>
<th>Condiment Image</th>
</tr>
</thead>
</div>
<tbody>
</tbody>
JAVASCRIPT
$("#customer_table_update_chain_order tbody tr").on('click',function(e){
//this is the item of table B that will append if the table A has no class
var customer_edit_condimentsScreenNameClicked = $(this).find('.customer_edit_condimentsScreenNameClicked').text();
var customer_edit_condimentsScreenPriced = $(this).find('.customer_edit_condimentsScreenPriced').text();
//here will check if table A has selected upsize or not
$('table#noun_chaining_order tbody tr').each(function(){
if ($(this).hasClass('selected_upsize')) {
sameRow = true;
}
else
{
sameRow =false;
$('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
$('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');
}
});
if(sameRow){
alert('You can"t upsize the item');
}
});

Please try this.
If my understanding is correct this should work.
$(".customer_edit_table_chaining_condiments").on('click',function(e){
//this is the item of table B that will append if the table A has no class
var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();
if($('#noun_chaining_order').find('tr.selected_upsize').length){
alert('You can"t upsize the item');
}else{
$('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
$('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');
}
})

calcul jQuery does not work

I try to change value by default with a calcul : value by default * quantity / 100. In my script something does not work because nothing happened, I can't find what! (jQuery is very new for me...)
$(function () {
$("#calcul").click(function (e) {
e.preventDefault();
var valeur = parseFloat($("#valquantite").text() );
$("#nutrition > tbody > tr").each(function () {
var valeurOrigin = parseFloat($(this).find("td").eq(1).text().replace(",", "."));
var newValeur;
if ($.isNumeric(valeurOrigin) === true) {
newValeur = valeurOrigin*valeur/100;
newValeur = Math.ceil(newValeur*1000)/1000;
} else {
newValeur = $(this).find("td").eq(1).text();
}
$(this).find("td").eq(2).html(newValeur);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow-x:scroll;;" name="formu">
<table class="table table-striped" id="nutrition" >
<thead>
<tr>
<th>Aliments</th>
<th id="qty">Poids</th>
<th class="generaux">Energie kJ</th>
<th class="generaux">Energie kcal</th>
</thead>
<tbody class="text-primary" id="">
<tr><td>Pain au lait, préemballé:</td><td id="valquantite"><strong>35gr</strong></td>
<td class="generaux" name="">1510</td>
<td class="generaux">358</td>
</tr>
<tr><td>Total</td>
<td><strong>50gr</strong></td>
</tr>
</tbody>
</table>
<input class="btn btn-primary" type="button" value="Calculer" id="calcul" />
What i try to do is that the first column after the name retrieves the quantities from a table (different for each row), then I retrieve the values ​​by default columns energie_kj, energie_kcal, proteines, etc .. from a table (there are 60 Columns !! they are already calculated by default, I do not need to do any conversion). Some cells contain text (example: nc, traces, <) that I want to display as text. Then I have to calculate the total of each column (ignoring cells that contain text). That's my problem! I posted another question for the same problem with a code in js that works almost but not completely ... here: Javascript problems with NaN
Thanks in advance for your answers.

Hope this will help you. Replace your code with following : I've just parse your valeur variable and replaced > sign when calling .each function and applied Id=nutrition to table rather than tbody tag.
$(function () {
$("#calcul").click(function (e) {
e.preventDefault();
var valeur = parseInt($("#valquantite").text());
$("#nutrition tbody tr").each(function () {
var valeurOrigin = parseFloat($(this).find("td").eq(2).text().replace(",", "."));
var newValeur;
if ($.isNumeric(valeurOrigin) === true) {
newValeur = valeurOrigin*valeur/100;
newValeur = Math.ceil(newValeur*1000)/1000;
} else {
newValeur = $(this).find("td").eq(1).text();
}
$(this).find("td").eq(2).html(newValeur);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow-x:scroll;;" name="formu">
<table class="table table-striped" id="nutrition">
<thead>
<tr>
<th>Aliments</th>
<th id="qty">Poids</th>
<th class="generaux">Energie kJ</th>
<th class="generaux">Energie kcal</th>
</thead>
<tbody class="text-primary">
<tr><td>Pain au lait, préemballé:</td><td id="valquantite"><strong>35gr</strong></td>
<td class="generaux" name="">1510</td>
<td class="generaux">358</td>
</tr>
<tr><td>Total</td>
<td><strong>50gr</strong></td>
</tr>
</tbody>
</table>
<input class="btn btn-primary" type="button" value="Calculer" id="calcul" />

The issue may be, we don't know exactly what it is you're trying to calculate or where the data comes from. The valQuantite to which you refer, does that change for each row? If so, why is it defined outside of the each function? If not, why does it refer to a value from the first row of the table?
Doing a little research, you seem to want to take the quantity column and use that along with the energie kJ column to calculate... something. I'd suggest using classes for the three columns, valquantite, energie-kj, and energie-kcal, which you can then use to manipulate the individual columns in a meaningful way. Using $(this).find("td").eq(2).text() is only as good as the coder -- what if the column layout changes? Instead, simply use $(this).find(".energie-kj").text() and you're good.
Now, having gotten to displaying the kj as you'd like (by taking the qty and multiplying it by the kj, then rounding), you can calculate the kCal by dividing that number by 4.1868 and rounding as you'd like.
But note, I've modified your code -- the quantity seems to change with each row, so I've moved valQuantite inside the each statement. Also, I can't stress enough, I've commented my code to the point of silliness. Doing so makes it far easier to track what each line of code is SUPPOSED to be doing, as well as what it's actually doing. And use your console, it is your debugging FRIEND! lol
$(function() {
// When the button is clicked, calculate the values.
$("#calcul").click(function(e) {
// First, make sure the button doesn't submit...
e.preventDefault();
// Each row is handled individually, so
$("#nutrition > tbody > tr").each(function() {
// First, get the qty for this row
var valeur = parseFloat($(this).find(".valquantite").text());
/****
* Here is a case. We have hard-wired to use the
* third column of the table for the original val,
* but we could also add a class for this col and
* reference that: $(this).find(".energie-kj");
****/
var valeurOrigin = parseFloat($(this).find("td").eq(2).text().replace(",", "."));
var energyKJ, energyKCal;
// If the energie kJ value is numeric, we do the first
if ($.isNumeric(valeurOrigin) === true) {
// calculate some value from the energie kJ and qty,
energyKJ = valeurOrigin * valeur / 100;
// 1 kCal = 4.1868 kJ, so do the conversion
energyKCal = (energyKJ/4.1868).toFixed(2);
energyKJ = energyKJ.toFixed(2);
} else {
// If the energie kJ value is NOT numeric, we simply
// set the displayed value to this
newValeur = $(this).find("td").eq(2).text();
}
$(this).find(".energie-kj").text(energyKJ);
$(this).find(".energie-kcal").text(energyKCal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow-x:scroll;;" name="formu">
<table class="table table-striped" id="nutrition">
<thead>
<tr>
<th>Aliments</th>
<th id="qty">Poids</th>
<th class="generaux">Energie kJ</th>
<th class="generaux">Energie kcal</th>
</thead>
<tbody class="text-primary" id="">
<tr>
<td>Pain au lait, préemballé:</td>
<td class="valquantite"><strong>35gr</strong></td>
<td class="generaux energie-kj" name="">1510</td>
<td class="generaux energie-kcal">358</td>
</tr>
<tr>
<td>Some other thing...:</td>
<td class="valquantite"><strong>45gr</strong></td>
<td class="generaux energie-kj" name="">1510</td>
<td class="generaux energie-kcal">358</td>
</tr> <tr>
<td>Total</td>
<td><strong>50gr</strong></td>
</tr>
</tbody>
</table>
<input class="btn btn-primary" type="button" value="Calculer" id="calcul" />

How to Get InnerHTML for Table Cell instead of an object or NaN

I am attempting to create a string that contains all of the data within an HTML table using JavaScript (open to changing to JQuery). By using this method below, I receive an NaN value, instead of the data (numbers).
function Ard() {
var table = document.getElementById("tblData");
var dataStr = "";
for (var i = 0, row; row = table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
var toAdd = col;
dataStr += toAdd;
}
}
};
I have also tried a jQuery method but it only returned an HTML object. It should be noted that when printing the 'col' value to the console, the data is collected properly (actual values).
The table I'm using is editable by the user, but it saves as a standard HTML table. Here is the basic code for the table below if it helps solve the problem.
<table id="tblData" class="table table-hover">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Treatment Number</th>
<th>Cell Number</th>
<th>Waste Container Number</th>
</tr>
</thead>
<tbody></tbody>
</table>
Any ideas towards how to get the innerHTML and add it properly to the string?
I would also like to do this with a row by column loop (set of two for or each loops maybe?) so that I know what column I'm grabbing from.

Since you are OK to use jquery,
var dataStr = "";
$('#tblData > tbody').each(function(e) {
dataStr += $(this).text();
});
console.log(dataStr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tblData" class="table table-hover">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Treatment Number</th>
<th>Cell Number</th>
<th>Waste Container Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>10101</td>
<td>20202</td>
<td>30303</td>
<td>40404</td>
<td>50505</td>
</tr>
<tr>
<td>wowowo</td>
<td>sksksk</td>
<td>alalal</td>
<td>qpqpqp</td>
<td>zmzmzm</td>
</tr>
</tbody>
</table>
If you want the dataStr to have the <td> tags also, you should use,
dataStr += $(this).html()
EDIT
If you also want to access the current column index, you can use this. But here, the dataStr would finally contain a single line string concatenating all the texts inside <td> tags.
$('#tblData > tbody > tr > td').each(function(e) {
var currentColNo = $(this).index();
dataStr += $(this).html();
});

With jQuery you could select all rows and the iterate over them and get the text:
var str = "", values = [];
$("#tblData").find('tbody').find('tr').each(function() {
//You can concatenate a string or push the values to an array
str += $(this).text();
values.push($(this).text());
});
console.log(str, values);

You can do it with pure js:
function Ard() {
var table = document.querySelectorAll("#tblData tr th");
var dataStr = "";
for (var i = 0; i < table.length; i++) {
dataStr += table[i].innerHTML;
}
};
JSFiddle Demo

This will get you all text from the table <td>s and post it into a textarea (just for demonstration purposes):
$('#out').val($('#tblData td').text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblData" class="table table-hover">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Treatment Number</th>
<th>Cell Number</th>
<th>Waste Container Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>some</td><td>extra</td><td>data</td>
</tr>
</tbody>
</table>
<textarea id="out" rows=10 cols=60></textarea>
Update:
If you "just" want to put the <td> contents into a single variable you could do:
var str=$('#tblData td').text()
I extended your example so you will actually get a result.

automatically multiply two values to give a total jquery

I have a jQuery question an was wondering if anyone could help me out.
I have an html table with information in it specifically for stones. I have a price per carat and a price per stone at the end of the table. I wish to have the price per carat multiply by the weight to give the price per stone. I also have a markup box that i have created in which the user inputs a number which is then regarded as a % and is automatically added to the price per carat and price per stone. here is what i have so far:
Here is the jquery
jQuery(document).ready(function () {
jQuery("#markup").keyup(multInputs);
function multInputs() {
var $inmult = jQuery(this).val();
jQuery("tr").each(function () {
var $val1 = jQuery('.price .amount', this).text().substring(1);
var $mult = $inmult / 100;
$mult += 1;
var $total = $val1 * $mult;
jQuery('.adjprice .amount', this).text("$" + $total.toFixed(2));
$val1 = jQuery('.org_ct', this).text();
$mult = $inmult / 100;
$mult += 1;
$total = $val1 * $mult;
jQuery('.adj_ct', this).text($total.toFixed(2));
});
}
});
Here is the HTML
<span class="markup">Adjust Price: <input name="markup" id="markup"> % </span>
<table id="myTable" class="tablesorter-blackice">
<thead>
<tr>
<th>Sku#</th>
<th>Availability</th>
<th>Cert #</th>
<th>Shape</th>
<th>Weight</th>
<th>Colour</th>
<th>Clarity</th>
<th>Cut</th>
<th>[MM]</th>
<th style="display:none" class="header">US$/ct</th>
<th class="header">US$/ct</th>
<!--<th>CDN$/ct</th>-->
<th style="display:none" class="header">Hidden Orig Price</th>
<th class="header">US$/St</th>
</tr>
</thead>
<tbody>
<tr>
<td>rerew</td>
<td>erewr</td>
<td>wrer</td>
<td>ewrer</td>
<td>erwer</td>
<td>ere</td>
<td>ewr</td>
<td>ewrew</td>
<td>wreew</td>
<td class="org_ct" style="display:none">
<td class="adj_ct">1234</td>
</td>
<td class="price" style="display:none">
<td class="adjprice">
<span class="amount"></span>
</td>
</td>
</tr>
</tbody>
</table>
The number is not automatically being multiplied to give me a price per stone. also the markup is not working either I really appreciate the help. THANKS!

If I understand your question correctly, this should do what you need. Note that I un-hid some of the columns to make it easier to work with, you'll need to hide them again.
jQuery(document).ready(function () {
function iDoMathsGood() {
$('.amount').map(function () {
// get all of the elements we'll need to manipulate
var row = $(this).parent().parent();
var originalTtl = row.find('.price');
var adjusted = row.find('.adj_ct');
// get the numbers we'll need and do some math
var cts = Number(row.find('.weight').html());
var origPPCT = Number(row.find('.org_ct').html()) * 1000;
var markupPrct = Number($('#markup').val()) / 100;
var markedupCost = (origPPCT * markupPrct) + origPPCT;
// do a little more math them set the results
adjusted.html((markedupCost / 1000).toFixed(2));
originalTtl.html(((origPPCT * cts) / 1000).toFixed(2));
return $(this).html(((markedupCost * cts) / 1000).toFixed(2));
});
}
iDoMathsGood();
$('#markup').keyup(function(){
iDoMathsGood();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="markup">Adjust Price: <input name="markup" id="markup" value="10"/> % </span>
<table id="myTable" class="tablesorter-blackice" border="1">
<thead>
<tr>
<th>Sku#</th>
<th>Availability</th>
<th>Cert #</th>
<th>Shape</th>
<th>Weight</th>
<th>Colour</th>
<th>Clarity</th>
<th>Cut</th>
<th>[MM]</th>
<th class="header">US$/ct</th>
<th class="header">US$/ct</th>
<th class="header">Hidden Orig Price</th>
<th class="header">US$/St</th>
</tr>
</thead>
<tbody>
<tr>
<td>rerew</td>
<td>erewr</td>
<td>ewrer</td>
<td>erwer</td>
<td class="weight">12</td>
<td>ewr</td>
<td>ewr</td>
<td>ewrew</td>
<td>wreew</td>
<td class="org_ct">42.50</td>
<td class="adj_ct"></td>
<td class="price"></td>
<td class="adjprice"> <span class="amount"></span>
</td>
</tr>
<tr>
<td>rerew</td>
<td>erewr</td>
<td>ewrer</td>
<td>erwer</td>
<td class="weight">6</td>
<td>ewr</td>
<td>ewr</td>
<td>ewrew</td>
<td>wreew</td>
<td class="org_ct">32.75</td>
<td class="adj_ct"></td>
<td class="price"></td>
<td class="adjprice"> <span class="amount"></span>
</td>
</tr>
</tbody>
</table>

To begin with, you're calling the multInputs function improperly. Don't forget the () when calling a function (or other method).
jQuery("#markup").keyup(multInputs);
should be
jQuery("#markup").keyup(multInputs());
From there, you've got a few other errors (to begin with):
var $inmult = $(this).val();, you're calling this from within the function but without actually having a "this" to be referred to. If you move this within the "each" function, then you'll have a "this" to refer to.
Of course, make sure you've linked to JQuery! :)
I would also add a class to the weight to make it easy to refer to
I'm not going to debug the whole thing but this should give you a start
$(document).ready(function () {
$("#markup").keyup(multInputs());
function multInputs() {
$("tr").each(function () {
var $inmult = $(this).find('td.weight' ).text();
var $val1 = $('.price .amount', this).text().substring(1);
var $mult = $inmult / 100;
$mult += 1;
var $total = $val1 * $mult;
$('.adjprice .amount', this).text("$" + $total.toFixed(2));
$val1 = $('.org_ct', this).text();
$mult = $inmult / 100;
$mult += 1;
$total = $val1 * $mult;
$('.adj_ct', this).text($total.toFixed(2));
});
}
});

How can I duplicate this in jQuery?

I have this code:
/* Modify the footer row to match what we want */
var nCells = nRow.getElementsByTagName('th');
nCells[1].innerHTML = iPageCPSV;
nCells[2].innerHTML = iPageCGV;
nCells[3].innerHTML = iPagePPSV;
nCells[4].innerHTML = iPagePGV;
It works just fine as it is. However I have added another <tr> into the section now. And I am having trouble figureing out how to populate the <th> in the second <tr>
<tfoot>
<tr style="background-color: #DDDDDD;">
<th align="right" colspan="6">
Page Total:
</th>
<th align="left"></th>
<th align="left"></th>
<th align="left"></th>
<th align="left"></th>
</tr>
<tr style="background-color: #DDDDDD;">
<th align="right" colspan="6">
Downline Total:
</th>
<th align="left"></th>
<th align="left"></th>
<th align="left"></th>
<th align="left"></th>
</tr>
</tfoot>
Before I added the second <tr> with more <th> everything worked. It still works, I just don't know how to populate the data into the second row. Can anyone help me modify the existing JavaScript or tell me how to duplicate it into jQuery?

Without jQuery...
var foot = nRow.getElementsByTagName('tfoot')[0];
foot.rows[0].cells[1].innerHTML = iPageCPSV;
foot.rows[0].cells[2].innerHTML = iPageCGV;
foot.rows[0].cells[3].innerHTML = iPagePPSV;
foot.rows[0].cells[4].innerHTML = iPagePGV;
foot.rows[1].cells[1].innerHTML = iPageCPSV;
foot.rows[1].cells[2].innerHTML = iPageCGV;
foot.rows[1].cells[3].innerHTML = iPagePPSV;
foot.rows[1].cells[4].innerHTML = iPagePGV;
Or with...
var foot = $('tfoot').first();
foot.children().each(function(i, row) {
row.cells[1].innerHTML = iPageCPSV;
row.cells[2].innerHTML = iPageCGV;
row.cells[3].innerHTML = iPagePPSV;
row.cells[4].innerHTML = iPagePGV;
});
A more modern solution...
var rows = nRow.getElementsByTagName('tfoot')[0].rows,
data = [iPageCPSV, iPageCGV, iPagePPSV, iPagePGV];
[].forEach.call(rows, function(el, i) {
data.forEach(function(item, ii) {
el.cells[ii + 1].innerHTML = item;
});
});
Since you need different data for each cell, I'd suggest putting it all in an Array, getting a collection of all the elements, and pairing the two...
var data = [iPageCPSV, iPageCGV, iPagePPSV, iPagePGV, 'foo', 'bar', 'baz', 'buz'];
$('tfoot > tr > th:not(:first-child)').html(function(i, el) {
return data[i];
});