Only started using javascript 2 weeks ago so I only have a limited understanding.
I have some javascript code that generates a html table from excel documents and i need to extract the values from part of one column and place those values into an array. Which i later will use to generate a line graph. The code mainly needs to work on IE11.
Truncated example table below.
<tbody>
// several other rows here
<tr>
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
//several more empty rows here
</tbody>
I need the value of all cells with ids in the E(xx) but only id sjs-E17 and greater (sjs-Exx where xx >= 17), so value 1E-3E+ but no cell above that one (so not sjs-E16 to sjs-E1).
The number of rows i varies but the needed values always start on row 17. And as seen the scrip generates several empty rows after the values stop, but none of them have any id.
Expected results is just an array (or function) containing the values from cell E17+
var test_array = ["1E", "2E", "3E", ...];
Using jQuery, you can do this:
var td = $('[id^="sjs-E"]'),
valArray = [];
td.each(function() {
var id = $(this).attr('id'),
idVal = +id.substring(5); //parse value after `E` to number using (+)
//check if idVal is number
if (!isNaN(idVal)) {
if (idVal >= 17) {
valArray.push($(this).html());
}
}
});
console.log(valArray);
.header {
background-color: grey;
font-size: 15px;
}
td {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="header">
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
<!-- several empty rows -->
</tbody>
</table>
Or, using vanilla javascript:
var tdRE = /^sjs-E([2-9]\d|1[7-9]|[1-9]{3,})$/,
els = document.getElementsByTagName('*'),
valArray = [];
for (var i = 0; i < els.length; i++) {
var match = tdRE.exec(els[i].id);
if (match) {
if ((+match[1]) >= 17) { //the (+) operator again, convert string to number and check if >= 17
valArray.push(els[i].innerHTML);
}
}
}
console.log(valArray);
.header {
background-color: grey;
font-size: 15px;
}
td {
text-align: center;
}
<table>
<tbody>
<tr class="header">
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
<!-- several empty rows -->
</tbody>
</table>
Regex explanation:
^sjs-E([2-9]\d|[1-9][7-9]|\d{3,})$
^ - asserts beginning of string
() - catching group
| - logical OR
$ - end of string
^sjs-E - starts with sjs-E
[2-9]\d - matches between 20 - 99
OR
1[7-9] - matches 17 - 19
OR
[1-9]{3,} - matches 100 and above
let result = [];
$('table tr td[id^="sjs-E"]').each(function(){
let ele = $(this);
//extracting last two digits of id
let digits = ele.attr('id').slice(-2);
if(!isNaN(digits) && digits >= 17){
result.push(ele.html());
}
});
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
</tbody>
</table>
var test_array = [];
var isGreaterThan = 17;
var until = 1000; // i don't know
for (var i=isGreaterThan; i < until; i++) {
var html = document.getElementById('sjs-E' + i.toString());
if (html) {
test_array.push(html.innerText);
}
}
Related
I'm trying to change the format of a predefined table. I do not have access to the HTML, only CSS and JS.
Basically what I want is to move every tr except the first into the first tr's td with class="field_3".
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
I have managed to make a working script by targeting the tr's id directly:
var rows = $("#unique_id_2, #unique_id_3, #unique_id_4");
$("#unique_id_1 > td.field_3").append(rows);
But I need a way to select them programmatically as their id are being generated uniquely.
After searching and trying for days I have not managed to wrap my head around this.
So any insight to help solve this would be greatly appreciated.
Edit: Added another snippet with more rows which adds to the complexity of the solution.
<table style="border: 1px solid black;">
<tbody >
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_5">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 2</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_6">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_7">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_8">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
Regards,
Espen
You can try this
$( document ).ready(function() {
var firstTr = $("tr:first-child").attr("id");
var rows =$("#"+firstTr ).nextAll();
$("tr:first-child td:last-child").append(rows);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
It will handle any length of table and if it solves your problem don't forget to vote and accept the answer
I need to automatically eliminate a column from a html table using javascript. The table is created automatically from a csv file using a framework so I can't modify it (ex. add an id, etc.). I managed to eliminate the column by adding a link to the column header, and on click it eliminates the column, but I can't find a way to do it automatically when the page loads. I'm new to javascript so please try to explain it for dummies.
function closestByTagName(el, tagName) {
while (el.tagName != tagName) {
el = el.parentNode;
if (!el) {
return null;
}
}
return el;
}
function delColumn(link) {
var idx = 2,
table = closestByTagName(link, "TABLE"),
rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(idx);
}
return false;
}
window.onload = function() {
var th = document.querySelectorAll("th");
th[2].innerHTML += ' X';
}
<div class="table">
<table class="inline">
<tr class="row0">
<th class="col0">FullName</th>
<th class="col1">Country</th>
<th class="col2">Position</th>
<th class="col3">CellPhone</th>
<th class="col4">Email</th>
</tr>
<tr class="row1">
<td class="col0">magnus</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">22</td>
<td class="col4">magnus.gaylord#example.com</td>
</tr>
<tr class="row2">
<td class="col0">Phoebe Feest</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">23</td>
<td class="col4">ylittel#example.net</td>
</tr>
<tr class="row3">
<td class="col0">Prof. Tad Johnston</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">24</td>
<td class="col4">srau#example.org</td>
</tr>
<tr class="row4">
<td class="col0">Annabelle Ortiz</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">25</td>
<td class="col4">damore.walker#example.org</td>
</tr>
<tr class="row5">
<td class="col0">Mrs. Adella Schiller IV</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">26</td>
<td class="col4">jadyn.dibbert#example.com</td>
</tr>
</table>
</div>
The above code works but I have to press the x on the position column for it to be eliminated and I need it to happen automatically. In other words I don't want to use the code href="#" onclick="return delColumn(this)" but have it happen on load.
Since all your columns have a particular class, maybe one possible solution using ES6 is to use:
document.querySelectorAll(".col2").forEach(col => col.remove());
Or with a standard approach:
var cols = document.querySelectorAll(".col2");
for (var i = 0; i < cols.length; i++)
{
cols[i].remove();
}
Example:
window.onload = function()
{
var cols = document.querySelectorAll(".col2");
for (var i = 0; i < cols.length; i++)
{
cols[i].remove();
}
// Or with ES6:
//document.querySelectorAll(".col2").forEach(col => col.remove());
}
<div class="table">
<table class="inline">
<tr class="row0">
<th class="col0">FullName</th>
<th class="col1">Country</th>
<th class="col2">Position</th>
<th class="col3">CellPhone</th>
<th class="col4">Email</th>
</tr>
<tr class="row1">
<td class="col0">magnus</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">22</td>
<td class="col4">magnus.gaylord#example.com</td>
</tr>
<tr class="row2">
<td class="col0">Phoebe Feest</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">23</td>
<td class="col4">ylittel#example.net</td>
</tr>
<tr class="row3">
<td class="col0">Prof. Tad Johnston</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">24</td>
<td class="col4">srau#example.org</td>
</tr>
<tr class="row4">
<td class="col0">Annabelle Ortiz</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">25</td>
<td class="col4">damore.walker#example.org</td>
</tr>
<tr class="row5">
<td class="col0">Mrs. Adella Schiller IV</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">26</td>
<td class="col4">jadyn.dibbert#example.com</td>
</tr>
</table>
</div>
Shidersz's answer is fine, but it's also worth noting that you could do with with a single CSS rule instead of JavaScript:
.col2 {
display: none;
}
<div class="table">
<table class="inline">
<tr class="row0">
<th class="col0">FullName</th>
<th class="col1">Country</th>
<th class="col2">Position</th>
<th class="col3">CellPhone</th>
<th class="col4">Email</th>
</tr>
<tr class="row1">
<td class="col0">magnus</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">22</td>
<td class="col4">magnus.gaylord#example.com</td>
</tr>
<tr class="row2">
<td class="col0">Phoebe Feest</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">23</td>
<td class="col4">ylittel#example.net</td>
</tr>
<tr class="row3">
<td class="col0">Prof. Tad Johnston</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">24</td>
<td class="col4">srau#example.org</td>
</tr>
<tr class="row4">
<td class="col0">Annabelle Ortiz</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">25</td>
<td class="col4">damore.walker#example.org</td>
</tr>
<tr class="row5">
<td class="col0">Mrs. Adella Schiller IV</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">26</td>
<td class="col4">jadyn.dibbert#example.com</td>
</tr>
</table>
</div>
I need help populating my table with JSON array based on last and previous result in Bigroad Scoreboard format.
[{"result":"M","no":"1"},{"result":"M","no":"2"},{"result":"M","no":"3"},{"result":"D","no":"4"},{"result":"M","no":"5"},{"result":"M","no":"6"},{"result":"M","no":"7"},{"result":"W","no":"8"},{"result":"W","no":"9"},{"result":"M","no":"10"},{"result":"D","no":"11"},{"result":"M","no":"12"},{"result":"W","no":"13"},{"result":"M","no":"14"}]
ive tried counless times to no avail i keep getting stuck at the comparison with last and previous objects of the json array.
im using this to populate another table i tried approaches similar to this
function history() {
$.getJSON('/history.php', function(data) {
$.historyText = '';
$.each(data, function(i) {
$.winner = data[i].result;
$.no = data[i].no;
$.historyText = '<div class="history ' + $.winner + '" >' + $.no + '</div>';
$(".cols-" + i).html($.historyText);
});
});
}
I need it to output like this.
any suggestions would be greatly apreciated.
table {border-collapse:collapse;border-spacing:0;}
table td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
<table>
<tr>
<td class="cols-0">1m</td>
<td class="cols-5">8w</td>
<td class="cols-10">10m</td>
<td class="cols-15">13w</td>
<td class="cols-20">14m</td>
<td class="cols-25"></td>
<td class="cols-30"></td>
<td class="cols-35"></td>
<td class="cols-40"></td>
<td class="cols-45"></td>
</tr>
<tr>
<td class="cols-1">2m</td>
<td class="cols-6">9w</td>
<td class="cols-11">11d</td>
<td class="cols-16"></td>
<td class="cols-21"></td>
<td class="cols-26"></td>
<td class="cols-31"></td>
<td class="cols-36"></td>
<td class="cols-41"></td>
<td class="cols-46"></td>
</tr>
<tr>
<td class="cols-2">3m</td>
<td class="cols-7"></td>
<td class="cols-12">12m</td>
<td class="cols-17"></td>
<td class="cols-22"></td>
<td class="cols-27"></td>
<td class="cols-32"></td>
<td class="cols-37"></td>
<td class="cols-42"></td>
<td class="cols-47"></td>
</tr>
<tr>
<td class="cols-3">4d</td>
<td class="cols-8"></td>
<td class="cols-13"></td>
<td class="cols-18"></td>
<td class="cols-23"></td>
<td class="cols-28"></td>
<td class="cols-33"></td>
<td class="cols-38"></td>
<td class="cols-43"></td>
<td class="cols-48"></td>
</tr>
<tr>
<td class="cols-4">5m</td>
<td class="cols-9">6m</td>
<td class="cols-14">7m</td>
<td class="cols-19"></td>
<td class="cols-24"></td>
<td class="cols-29"></td>
<td class="cols-34"></td>
<td class="cols-39"></td>
<td class="cols-44"></td>
<td class="cols-49"></td>
</tr>
</table>
I have drupal view that generate one table split to multiple table thead and tbody, I need to sum the total of the columns and rows per tbody and not for all the table
I have this code, see code here
HTML
<table id="sum_table" width="300" border="1">
<thead>
<tr class="titlerow">
<td></td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></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>
</tbody>
<thead>
<tr class="titlerow">
<td></td>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">11</td>
<td class="rowAA">22</td>
<td class="rowBB">33</td>
<td class="rowBB">44</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">11</td>
<td class="rowAA">22</td>
<td class="rowBB">33</td>
<td class="rowBB">44</td>
<td class="totalRow"></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>
</tbody>
<thead>
<tr class="titlerow">
<td></td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">111</td>
<td class="rowAA">222</td>
<td class="rowBB">333</td>
<td class="rowBB">444</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">111</td>
<td class="rowAA">222</td>
<td class="rowBB">333</td>
<td class="rowBB">444</td>
<td class="totalRow"></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>
</tbody>
</table>
CSS
#sum_table {
white-space: nowrap;
}
#sum_table td {
padding: 5px 10px;
}
JavaScript in onLoad
$("#sum_table tr:not(:first,:last) td:last-child").text(function(){
var t = 0;
$(this).prevAll().each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return t;
});
$("#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;
});
How can I sum total after every category?
Thanks a lot
Here is a FIDDLE that does most of what you want.
I just saw your comment about the totals after every tbody...I'll have to work on it a bit more. Still doable.
JS
var totrow = 0, totcol=0; //setting totalsforrow and totalsforcolumns variables to zero
$('.numrow').each( function(){ //for each of the rows with class='numrow'
for(var n=1; n<5; n++) //do a loop four times for the right column totals
{
totrow = totrow + parseInt( $(this).children("td:eq("+ n +")").text() );
} //grab the values of each of the four tds and add them together
$( $(this).children('td:eq(5)') ).html(totrow); //put the summed value in the 'total' td
totrow = 0; // reset the value for the next "each .numrow"
});
for(var m = 1; m < 5; m++) //for loop for four column totals
{
$('.numrow').each( function(){ // for each of the rows with class .numrow
totcol = totcol + parseInt($(this).children("td:eq("+ m +")").text() );//add up values
console.log(totcol); // just a view of the totcol printed to the console log
});
$( "#sum_table tr:eq(11) td:eq(" + m + ")" ).html( 'Col total: ' + totcol );//put total at bottom of column
totcol = 0; //reset total to get read for the next loop
}
Edit: Here's the update FIDDLE. It's brute-force, inelegant, but it works.
I have created a GSP page with two dynamic table with data and now i have to compare the data (inner html) and if any difference then highlight in table 2.
how to do it on clicking button using JS/jquery on clientside?
Table 1 is -
<table class="table loadTable" id ="table1">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode </td>
<td nowrap="">int </td>
<td nowrap="">YES </td>
<td nowrap="">NULL </td>
<td nowrap="">10 </td>
</tr>
<tr>
<td nowrap="">Number </td>
<td nowrap="">varchar </td>
<td nowrap="">NO </td>
<td nowrap="">20 </td>
<td nowrap="">NULL </td>
<td nowrap="">PRI </td>
</tr><tr>
<td nowrap="">Type </td>
<td nowrap="">tinyint </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">3 </td>
<td nowrap="">PRI </td>
</tr>
<tr>
<td nowrap="">Date </td>
<td nowrap="">smalldatetime </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">NULL </td>
</tr>
</tbody>
table 2 is -
<table class="table loadTable" id ="table2">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode</td>
<td nowrap="">int</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">10</td>
<td nowrap=""></td>
</tr>
<tr>
<td nowrap="">PhoneNumber</td>
<td nowrap="">varchar</td>
<td nowrap="">NO</td>
<td nowrap="">20</td>
<td nowrap="">NULL</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">Type</td>
<td nowrap="">tinyint</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">3</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">EffectiveDate</td>
<td nowrap="">datetime</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">NULL</td>
<td nowrap=""></td>
</tr>
</tbody>
</table>
if we click on following button then table 2 should get highlighted with any non matching data with table2.
<div style="align:right"><input type="submit" value="Compare IVR & TNS" /></div>
I wrote a quick function that should work as long as the number of rows is always the same and the user can't remove a row. in which case you should add id's to the rows and compare the rows by id or key.
function compareTables(t1, t2){
var t2rows = t2.find('tbody > tr');
t1.find('tbody > tr').each(function(index){
var t1row = $(this);
var t2row = $(t2rows[index]);
var t2tds = t2row.find('td');
t1row.find('td').each(function(index){
if($(this).text().trim() != $(t2tds[index]).text().trim() ){
console.log('difference: table1:('+$(this).text()+') table2:('+$(t2tds[index]).text()+')');
//set row in error
return;
}
});
});
}