I am trying to calculate the row and column total in an html table. However, I am trying to calculate the row total up to the second to last column. I can do it up to last column but not up to second to last. I also want to remove Total:0 from the first column. Can you please help me, below is my code:
<table id="sum_table" width="300" border="1">
<tr class="titlerow">
<td></td>
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
<td>Total By Row</td>
<td>Strawberry</td>
</tr>
<tr>
<td> Row1</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="totalRow"></td>
<td class="rowBB">4</td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="totalRow"></td>
<td class="rowBB">4</td>
</tr>
<tr>
<td>Row3</td>
<td class="rowAA">1</td>
<td class="rowAA">5</td>
<td class="rowBB">3</td>
<td class="totalRow"></td>
<td class="rowBB">4</td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</table>
JS:
$("#sum_table tr:not(:first,:last) td:nth-last-child(2)").text(function(){
var t = 0;
$(this).prevAll().each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return t;
});
$("#sum_table tr:last td").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(++i)+")").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "Total: " + t;
});
JSFiddle
I want the table to look like this format :
|Apples|Oranges|Watermelon|TotalRow|Strawberry|
Row1 |
Row2 |
Row3 |
Total|
If you want to prevent the bottom-left and bottom-right cells in the table from displaying the total (at least this is how I understand your question), you'll have to change your selector from #sum_table tr:last td to #sum_table tr:last td:not(:first,:last). And then, to account for the shift in indices (since the td element in column 1 has been excluded), you'll have to change ++i to i+2. Here's an updated version of the second part of your JS code (JSFiddle):
$("#sum_table tr:last td:not(:first,:last)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "Total: " + t;
});
Edit: Based on the update you made, is this perhaps more in line with what you're after? This solution basically modifies the HTML code by switching the second-last and last td's in each tr (i.e., in each row), and the first CSS selector in the JS code was modified to #sum_table tr:not(:first,:last) td:nth-child(5) so that the "Total" gets displayed in the second last column (i.e., the 5th td of each applicable row).
If, for whatever reason, you want the HTML code to stay as is and you'd like to implement a purely-JS solution that doesn't involve modifying the HTML code by hand, you can do something like the following (JSFiddle):
//Swap the second-last and last columns
$("#sum_table tr td:last-child").each(function(){
var lastRowContent = $(this)[0].innerHTML;
var secondLastRowContent = $(this).parent().find("td:nth-child(5)")[0].innerHTML;
$(this).parent().find("td:nth-child(5)")[0].innerHTML = lastRowContent;
$(this)[0].innerHTML = secondLastRowContent;
});
$("#sum_table tr:not(:first,:last) td:nth-child(5)").text(function(){
var t = 0;
$(this).prevAll().each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "Total: " + t;
});
This is basically the same as the first solution presented above in this edit, except the second-last and last columns are swapped programmatically using jQuery (instead of being manually swapped by hand).
Is this what you are looking for?
http://jsfiddle.net/unKDk/335/
I changed this
$("#sum_table tr:last")
to
$("#sum_table tr:last td:not(:first,:last)")
and
$(this).parent().prevAll().find("td:nth-child("+(++i)+")").each(function(){
to
$(this).parent().prevAll().find("td:nth-child("+(i + 2)+")").each(function(){
Related
I have a table where it has dynamic rows and I need to get the data and make calculations on it so I get the total number of rows in Javascript and run a loop in it. my table looks like this
<table id='mytable1'>
<tr>
<td id="name_1">Precious Metals</td>
<td id="price_1">500</td>
<td id="qty_1">10</td>
</tr>
<tr>
<td id="name_2">Non Precious Metals</td>
<td id="price_2">200</td>
<td id="qty_2">5</td>
</tr>
<tr>
<td id="name_3">Gemstones</td>
<td id="price_3">300</td>
<td id="qty_3">10</td>
</tr>
and my javascript looks like this
<script>
var counter = $('#mytable1 tr').length;
for (i = 1; i <= counter; i++) {
var price = document.getElementById('price_'+i).value;
var qty= document.getElementById('qty'+i).value;
var price_calc = price * qty;
var total_price = total_price + price_calc;
}
</script>
The problem is that if there is one row missed, I mean Admin delete the row #2 and now there will be two rows and when the loop runs and it did not find the row#2 then it throws the error. Please help me or guide me about how should I go with this problem
You can simplify your HTML and make the calculations independent of the number of rows you have in the table. On top of that, jQuery is not necessary.
Documentation in the source.
const table = document.getElementById("mytable1");
// Put all existing rows inside the table in an array
const rows = [...table.getElementsByTagName("tr")];
// Loop through all rows
rows.map( row => {
// Price is in the first cell
const price = parseInt(row.cells[1].innerHTML);
// Quantity is in the second cell
const quantity = parseInt(row.cells[2].innerHTML);
// Calculate total value for each row
const total_price = price * quantity;
console.log(total_price);
});
<table id='mytable1'>
<tr>
<td>Precious Metals</td>
<td>500</td>
<td>10</td>
</tr>
<tr>
<td>Non Precious Metals</td>
<td>200</td>
<td>5</td>
</tr>
<tr>
<td>Gemstones</td>
<td>300</td>
<td>10</td>
</tr>
</table>
I have an html table generated dynamically from a database. Rows where a particular cell value is the same represents paired data and I want to separate those pairs with an empty row. The best way I can think of is to find where that value differs from the preceding value. Is this possible?
<table id="myTable">
<tr>
<th>Team #</th>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr class="data-in-table">
<td class="id">12345</td>
<td>Tom</td>
<td>46</td>
<tr class="data-in-table">
<td class="id">12345</td>
<td>Dick</td>
<td>32</td>
<tr class="data-in-table">
<td class="id">34567</td>
<td>Harry</td>
<td>45</td>
<tr class="data-in-table">
<td class="id">76543</td>
<td>Will</td>
<td>45</td>
</tr>
<tr class="data-in-table">
<td class="id">76543</td>
<td>Sam</td>
<td>45</td>
</tr>
</tbody>
This is code I've seen comparing adjacent cells and tried to change for my needs:
$("#myTable").each(function () {
$(this).find('tr').each(function (index) {
var currentRow = $(this);
var nextRow = $(this).next('tr').length > 0 ? $(this).next('tr') : null;
if (index%2==0&&nextRow && currentRow(td[0].text() != nextRow(td[0].text()) {
$('#myTable tr:next').after('<tr><td></td><td></td><td></td></tr>');
}
});
});
I'd like it to look something like this:
Team # Name Age
12345 Tom 46
12345 Dick 32
34567 Harry 45
76543 Will 45
76543 Sam 45
As the database updates, team members will always be positioned adjacent to each other, but sometimes one teammate will appear before the second teammate and the table should reflect that.
I found that this works, through trial and error:
var last = ''
var rowCount = $('#myTable >tbody >tr').length;
for (var i=0;i<rowCount-1;i++) {
if (last != $('#myTable tr .id:eq('+i+')').html()) {
var lastRow = $('#myTable tr .id:eq('+i+')')
$(lastRow).parents('tr').before('<tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>')
}
var last = $('#myTable tr .id:eq('+i+')').html()
}
I don't know if there is a more efficient way than using a for.. statement to run through each row.
I have a "football squares" game going, and I would like to highlight cells of the winners based on the top and side headers.
Now, I know they're not really headers but they serve the same purpose.
My table is located at this jfiddle: https://jsfiddle.net/8ybtntqg/
What I want to do is this:
Let's say the winner would be whoever is in the cell that lines up with TeamA - 2 and TeamZ - 9. That would be Mitch. I want to highlight Mitch's cell. How would I do this with Javascript or Jquery? I know how to do it if I was just looking for the word "Mitch", but I want to automatically do it, based on the numbers of TeamA and TeamZ.
I have this so far, but of course that only highlights the name but it's the only place I knew to start:
$('#table_id td').each(function() {
if ($(this).text() == 'Mitch') {
$(this).closest('td').css('background-color', '#f00');
}
});
You can get the index of the column and row using jQuery's filter() method.
That will give you direct access to the cell like so:
$('tr').eq(row).find('td').eq(col).css('background-color', '#f00');
Snippet:
function highlight(teamA, teamZ) {
var col, row;
col = $('#table_id td').filter(function() { //return column of teamA
return $(this).html() === teamA.replace(' - ', '<br>');
}).index();
row = $('#table_id tr').filter(function() { ////return row of teamZ
return $(this).html().indexOf(teamZ.replace(' - ', '<br>')) > -1;
}).index();
$('tr').eq(row).find('td').eq(col).css('background-color', '#f00');
}
highlight('TeamA - 2', 'TeamZ - 9');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="table_id">
<tr>
<td>Squares</td>
<td>TeamA<br>1</td>
<td>TeamA<br>2</td>
<td>TeamA<br>3</td>
<td>TeamA<br>4</td>
<td>TeamA<br>5</td>
<td>TeamA<br>6</td>
<td>TeamA<br>7</td>
<td>TeamA<br>8</td>
<td>TeamA<br>9</td>
<td>TeamA<br>0</td>
</tr>
<tr>
<td>TeamZ<br>3</td>
<td bgcolor="#89ff89">Mark</td>
<td bgcolor="#89ff89">John</td>
</tr>
<tr>
<td>TeamZ<br>5</td>
<td bgcolor="#89ff89">Mike</td>
<td bgcolor="#89ff89">Earl</td>
</tr>
<tr>
<td>TeamZ<br>8</td>
<td bgcolor="#89ff89">Morris</td>
<td bgcolor="#89ff89">Brice</td>
</tr>
<tr>
<td>TeamZ<br>7</td>
<td bgcolor="#89ff89">Taylor</td>
<td bgcolor="#89ff89">Evan</td>
</tr>
<tr>
<td>TeamZ<br>9</td>
<td bgcolor="#89ff89">Mandy</td>
<td bgcolor="#89ff89">Mitch</td>
</tr>
<tr>
<td>TeamZ<br>2</td>
<td bgcolor="#89ff89">Tony</td>
<td bgcolor="#89ff89">Jennifer</td>
</tr>
<tr>
<td>TeamZ<br>1</td>
<td bgcolor="#89ff89">Kristen</td>
<td bgcolor="#89ff89">Hector</td>
</tr>
<tr>
<td>TeamZ<br>4</td>
<td bgcolor="#89ff89">Gabby</td>
<td bgcolor="#89ff89">David</td>
</tr>
<tr>
<td>TeamZ<br>6</td>
<td bgcolor="#89ff89">George</td>
<td bgcolor="#89ff89">Steffanie</td>
</tr>
<tr>
<td>TeamZ<br>0</td>
<td bgcolor="#89ff89">Breck</td>
<td bgcolor="#89ff89">Terry</td>
</tr>
</table>
You can iterate over all the table elements to find the matching values, then use CSS selectors to highlight the matched field. Something like this will work:
winningAScore = 2;
winningZScore = 9;
//get top row
counter = 0;
$('#table_id tr:first-child td').each(function() {
var strOut = $(this).html().replace(/Team[A-z]<br>/g,'');
if(!isNaN(strOut) && strOut == winningAScore) {
posnX = counter;
}
counter++;
})
//get first column row
counter = 0;
$('#table_id tr td:first-child').each(function() {
var strOut = $(this).html().replace(/Team[A-z]<br>/g,'');
if(!isNaN(strOut) && strOut == winningZScore) {
posnY = counter;
}
counter++;
})
$('tr:eq('+posnY+') td:eq('+posnX+')').css('background-color', 'red');
You can see it working in this JS Fiddle: https://jsfiddle.net/igor_9000/8ybtntqg/1/
You can do index based detect and selection in jQuery like so: $('tr:eq(2) td:eq(1)').css('background-color', 'red');
Example: http://codepen.io/anon/pen/EPLNvB
Having such table
<table>
<thead> ... </thead>
<tbody>
<tr class="TableOdd">
<td class="TableCol0"> 1 </td>
<td class="TableCol1"> x </td>
<td class="TableCol2"> x </td>
<td class="TableCol3"> # </td>
</tr>
<tr class="TableEven">
<td>....</td>
</tr>
</tbody>
E.g. each cell has own class indicating it's column number TableCol0,1,2..N
In each row, needed compare the content of the cells in column 1 and 2 and write the result into colum3.
Managed the following script,
$(document).ready(function() {
var toterr = 0;
$('tbody tr.TableEven,tbody tr.TableOdd').each(function() {
var wanted = $(this).find('.TableCol1' ).html();
var actual = $(this).find('.TableCol2' ).html();
//console.log('wanted='+wanted+'=actual='+actual+'=');
if ( wanted == actual ) {
$(this).find('.TableCol3').text('ok');
} else {
$(this).find('.TableCol3').text('ERROR');
toterr++;
}
});
$('#totalerror').text(toterr);
});
It is probably not optimal, but works.
Now have a bit different scenario: Need compare two cells what are before a cell with a specified content (:CMP:), e.g:
<table>
<thead> ... </thead>
<tbody>
<tr class="TableOdd">
<td class="TableCol0"> x </td>
<td class="TableCol1"> x </td>
<td class="TableCol2"> :CMP: </td>
<td class="TableCol3"> etc </td>
</tr>
<tr class="TableEven">
<td class="TableCol0"> N </td>
<td class="TableCol1"> x </td>
<td class="TableCol2"> y </td>
<td class="TableCol3"> :CMP: </td>
</tr>
</tbody>
For each row, need compare cells what are before :CMP:, and replace the :CMP: with the result. e.g.
in the 1st row need compare the x and x and write ok in the cell .TableCol2
in the 2nd row need compare the x and y and write ERROR in the cell .TableCol3
I haven't idea how to modify the above script.
Can easily get the index of the cell that contains ':CMP:' and use the index to reference the previous cells. Or use traverses like prev() or use eq() once index is found.
$('tbody tr').each(function () {
var $cells = $(this).children(),
$cmp = $cells.filter(':contains(":CMP:")'),
cmpIndex = $cells.index($cmp);
// array of values of previous cells
var values = $.map($cells.slice(cmpIndex - 2, cmpIndex), function (el) {
return $.trim($(el).text());
});
// make sure we have 2 cells with values and compare
var cmpText = values.length === 2 && values[0] === values[1] ? 'OK' : 'ERROR';
$cmp.text(cmpText);
});
DEMO
I have this code:
<table>
<tbody>
<tr><td>Table 1</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td align="left">Number</td>
<td><b>33</b></td>
</tr>
<tr>
<td width="150" align="left">Field</td>
<td>XXXX</td>
</tr>
<tr>
<td align="left">Select: </td>
<td colspan="4">
<select name="status" size="1">
<option selected="selected" value="2">one</option>
<option value="1">two</option>
</select>
</td>
</tr>
</tbody>
</table>
and i want to remove this line by searching "Field" with pure Javascript:
<tr>
<td width="150" align="left">Field</td>
<td>XXXX</td>
</tr>
when there is a 33, 66 or 99 in this line from my 2nd table:
<tr>
<td align="left">Number</td>
<td>33</td>
</tr>
The problem is that i don't have any id's or classes for identification! i want to use the code with Greasemonkey.
Here you can see a JSFIDDLE of my table.
And here you can see on JSFIDDLE how it should look.
Best regards bernte
Here you go:
var disallowedValues = ['33', '66', '99'];
var cols = document.getElementsByTagName('td');
var colslen = cols.length;
var i = -1;
var disallowedTable;
while(++i < colslen){
// look for the td where the disallowed values are
if(disallowedValues.indexOf(cols[i].innerHTML) >= 0)
{
// get the table where the disallowed values is
disallowedTable = cols[i].parentNode.parentNode.parentNode;
// break the cicle to stop looking for other rows
//break;
}
}
// look for the 'Field' value only on the table that has the disallowed value
var cols = disallowedTable.getElementsByTagName('td');
cols = disallowedTable.getElementsByTagName('td');
colslen = cols.length;
i = -1;
while(++i < colslen){
// look for the td where the 'Field' value is
if(cols[i].innerHTML == 'Field')
{
// get the tr for such td
var deletionTR = cols[i].parentNode;
//delete that tr
deletionTR.parentNode.removeChild(deletionTR);
// break the cicle to stop looking for other rows
break;
}
}
You can always do a simpler version if jquery is an option.