Build array with all elements with specific class using JS - javascript

I have a table with multiple rows. I need to get the text from specific rows and build an array which I can pass on and access later. I created a jsfiddle with the code that I am using:
https://jsfiddle.net/h6x2sqk2/3/
The problem is that everything is doubled:
[
{
"drdsc":"DSCDS0101101",
"bkpsets":[
{
"backpset":"Backup1",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
},
{
"backpset":"Backup2",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
},
{
"backpset":"Backup3",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
},
{
"backpset":"Backup4",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
}
]
},
{
"drdsc":"DSCDS0202202",
"bkpsets":[
{
"backpset":"Backup1",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
},
{
"backpset":"Backup2",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
},
{
"backpset":"Backup3",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
},
{
"backpset":"Backup4",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
}
]
}
]
Result that I need is:
[
{
"drdsc":"DSCDS0101101",
"bkpsets":[
{
"backpset":"Backup1",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
},
{
"backpset":"Backup2",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
},
{
"backpset":"Backup3",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
}
]
},
{
"drdsc":"DSCDS0202202",
"bkpsets":[
{
"backpset":"Backup4",
"srvrolenotes":"",
"setsize1notes":"",
"setsize2notes":""
}
]
}
]


Try my suggestion here. What i did is to read from one backup till the other what you have in the tr sections
working example
$( document ).ready(function() {
var dscarray = $('.bkpsrvdsc').map(function() {
var $dsclient = $(this);
var $rows = $dsclient.closest('tr').nextUntil('tr:has(.drbkpsetdsc)');
var drbkparray = $dsclient.closest('tr').nextUntil('tr:has(.bkpsrvdsc)').find('.drbkpset').parent().map(function() {
var $backuppset = $(this);
var obj = { backpset: $backuppset.text() };
var $rows = $backuppset.closest('tr').nextUntil('tr:has(.drbkpset)');
obj['srvrolenotes'] = $rows.find('.srvrolenotes').val();
obj['setsize1notes'] = $rows.find('.setsize1notes').val();
obj['setsize2notes'] = $rows.find('.setsize2notes').val();
return obj;
}).get();
var obj = { drdsc: $dsclient.text(), bkpsets: drbkparray };
return obj;
}).get();
console.log(dscarray);
});


Your $rows get more then one row because .nextUntil('tr:has(.drbkpsetdsc)') runs through the complete table and not until the next .bkpsrvdsc
It could be easier if you put a table into a td.bkpsrvdsc
$(document).ready(function() {
var dscarray = $('.bkpsrvdsc').map(function() {
var bkpsrvdsc = $(this);
return {
name: $(this).find('tr:first-child > td').text(),
contents: bkpsrvdsc.find('.drbkpset').map(function() {
return {
backpset: $(this).text(),
srvrolenotes: $(this).next('tr').find('.srvrolenotes').text(),
}
})
}
});
console.log(dscarray);
});
.bkpsrvdsc table {
width: 100%;
}
table th,
table td {
width: 33.3333%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table style="width: 600px;">
<thead>
<tr>
<th>DSC#</th>
<th>Check</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3" class="bkpsrvdsc">
<table>
<tbody>
<tr>
<td>DSCDS0101101</td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="2" class="drbkpset">Backup1</td>
</tr>
<tr>
<td> </td>
<td>Server role</td>
<td><textarea data-autoresize rows="1" placeholder="Type notes here..." class="srvrolenotes"></textarea></td>
</tr>
<tr>
<td> </td>
<td colspan="2" class="drbkpset">Backup2</td>
</tr>
<tr>
<td> </td>
<td>Server role</td>
<td><textarea data-autoresize rows="1" placeholder="Type notes here..." class="srvrolenotes"></textarea></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="3" class="bkpsrvdsc">
<table>
<tbody>
<tr>
<td>DSCDS0202202</td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="2" class="drbkpset">Backup4</td>
</tr>
<tr>
<td> </td>
<td>Server role</td>
<td><textarea data-autoresize rows="1" placeholder="Type notes here..." class="srvrolenotes"></textarea></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Related

How to bind JSON object with knockout on Dropdown change with html table

When I change the dropdown value, json data is change but not loads, and throws this error:
Uncaught Error: You cannot apply bindings multiple times to the same element.
How to resolve this?
$("#VehicleID").change(function () {
var categoryid = $("#VehicleTypeID option:Selected").val().trim();
var subcategoryid = $(this).val();
var url = "../Consignment/LoadratebydetailId";
$.getJSON(url, { CategoryID: categoryid, SubCategory: subcategoryid },
function (classesData) {
//var koNode = document.getElementById('fareDetailbody');
ko.cleanNode(classesData);
//ko.cleanNode($element[0]);
ko.applyBindings({
teams: classesData,
});
});
$("#rateChargeDiv").hide();
$("#rateChargeDiv").show();
});
<div id="rateDiv">
<div>
<h4>Selected Detail Changed</h4>
<table>
<thead>
<tr>
<th>name</th>
<th>cloth</th>
<th>color</th>
<th>size</th>
<th>length</th>
<th>total</th>
</tr>
</thead>
<tbody id="fareDetailbody" data-bind="foreach: teams">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: cloth"></td>
<td data-bind="text: color"></td>
<td data-bind="text: size"></td>
<td data-bind="text: length"></td>
<td data-bind="text: total"></td>
</tr>
</tbody>
</table>
</div>
<div id="close">close</div></div>
public JsonResult LoadratebydetailId(string CategoryID, string SubCategory)
{
if (CategoryID == "" || string.IsNullOrEmpty(CategoryID))
{
return Json("failure");
}
var vehCategory = this.GetratebydetailId(Convert.ToInt32(CategoryID));
var StatesData = vehCategory.
Where(cat => cat.VehicleCategoryID==Convert.ToInt32(SubCategory))
.Select(m => new
{
m.name,
m.cloth,
m.color,
m.size,
m.length,
m.total
});
return Json(StatesData, JsonRequestBehavior.AllowGet);
}

Clicking on sort, removes data from datatable. Reactjs Javascript

I am using datatable in react. When i click on sorting (in tHead) it removes all data and says no data available in table
What i think here, is that tbody is being rendered before Datatable initialisation. Or something like that.
Here is my code in PasteBin
And here is some code of componentDidMount
componentDidMount(){
employessData = thisclass.props.data;
thisclass.setState({
stateReady: true
})
var self = this;
$('#mytableEmp').dataTable({
"columnDefs": [
{ "width": "20px", "targets": 0 }
],
"pagingType": "numbers",
"bAutoWidth": false,
"bDestroy": true,
"fnDrawCallback": function() {
self.forceUpdate();
}
});
$('#checkboxhead').removeAttr('area-sort').removeClass('sorting_asc');
$(".checkAllCBEmp").click(function () {
$('#mytableEmp tbody input[type="checkbox"]').prop('checked', this.checked);
});
$("#searchtabletb").on("keyup", function() {
var value = $(this).val();
value = value.toLowerCase();
console.log(value);
$("#mytableEmp tr").each(function(index) {
if (index != 0) {
var row = $(this);
var id = row.find("td").text();
id = id.toLowerCase();
if (id.indexOf(value) === -1) {
$(this).hide();
}
else {
$(this).show();
}
}
});
});
}
And here is code from render function.
render () {
return (
<table className="table table-stripped" id="mytableEmp">
<thead>
<tr className="table-head-row">
<th id="checkboxhead" className="firsttd">
<div className="round-cb">
<input type="checkbox" id="cb1_emp" className="checkAllCBEmp" />
<label htmlFor="cb1_emp"></label>
</div>
</th>
<th>Title</th>
<th>Type</th>
<th>Created on</th>
<th>From</th>
<th>To</th>
<th>Processed</th>
<th>Amount</th>
<th>Status</th>
<th id="detailarrowhead" className="lasttd"></th>
</tr>
</thead>
<tbody>
{
this.state.stateReady ?
employessData.map((heading, index) => {
return(<tr role="row" className="tablerow" key={index}>
<td className="firsttd">
<div className="round-cb">
<input type="checkbox" value="cb1" id={heading.userId} />
<label htmlFor={heading.userId}></label>
</div>
</td>
<td>
<div className="emp-avatar">
<img src={heading.profile_picture} />
</div>
<div className="emp-title-div">
<div className="emp-title">
<div>
{heading.name}
</div>
</div>
</div>
</td>
<td>c</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td><span className="badge badge-red">Rejected</span></td>
<td className="lasttd"><Link to="/emp-profile" className="table-details-btn" onClick={() => {this.addlocalid(heading.userId)}}>View User</Link></td>
</tr>)
})
:
""
}
/tbody>
</table>
)
}

The scope of employessData is weird, so it thisclass.
You will want to do this instead in render:
let employessData = this.props.data;
this.state.stateReady ?
employessData.map(...);
and then understand if/why this.props.data that this component receives is empty (which is not visible here).

I have resolved this issue for the time being.
I have added delay of 3 seconds in following function
setTimeout(function(){
$('#mytableEmp').dataTable({
"columnDefs": [
{ "width": "20px", "targets": 0 }
],
"pagingType": "numbers",
"bAutoWidth": false,
"bDestroy": true,
"fnDrawCallback": function() {
self.forceUpdate();
}
});
}, 3000);

How do I add currency formatting to this table w/ sumtr + datatables?

I have this table where I am using sumtr for the table footer, and displaying all the data within datatables.
I need to display all the values as currency however.
I cannot change the values post sumtr because it won't be able to calculate the strings.
the Code for the tables here:
<table id="invoice_table">
<thead>
<tr>
<th>Type</th>
<th>Qty</th>
<th>Value</th>
</tr>
</thead>
<tbody>
#foreach (var item1 in Model.Date1)
{
try
{
string par = item1.theMoney.Value.ToString().Replace("-", "");
<tr>
<td>Cash</td>
<td class="sum">#Html.DisplayFor(modelItem => item1.theCount)</td>
<td class="sum">#Html.DisplayFor(modelItem => par)</td>
</tr>
}
catch { }
}
#foreach (var item2 in Model.Date2)
{
try
{
string par = item2.theMoney.Value.ToString().Replace("-", "");
<tr>
<td>Cheque</td>
<td class="sum">#Html.DisplayFor(modelItem => item2.theCount)</td>
<td class="sum">#Html.DisplayFor(modelItem => par)</td>
</tr>
}
catch { }
}
#foreach (var item3 in Model.Date3)
{
try
{
string par = item3.theMoney.Value.ToString().Replace("-", "");
<tr>
<td>Online</td>
<td class="sum">#Html.DisplayFor(modelItem => item3.theCount)</td>
<td class="sum">#Html.DisplayFor(modelItem => par)</td>
</tr>
}
catch { }
}
#foreach (var item4 in Model.Date4)
{
try
{
string par = item4.theMoney.Value.ToString().Replace("-", "");
<tr>
<td>PAP</td>
<td class="sum">#Html.DisplayFor(modelItem => item4.theCount)</td>
<td class="sum">#Html.DisplayFor(modelItem => par)</td>
</tr>
}
catch { }
}
</tbody>
<tfoot>
<tr class="summary">
<td>Total:</td>
<td class="first">?</td>
<td class="second">?</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
jQuery(function ($) {
$('#invoice_table').sumtr();
$('#invoice_table .summary').sumtrRatio('.first', '.second');
$('#invoice_table').DataTable({
dom: 'Blfrtip',
buttons: [
'copyHtml5',
'csvHtml5',
]
});
});
</script>
What the table looks like:
Need it to be in proper currency format ("C"): $94,029

How I did it
$('#invoice_table').sumtr({
onComplete: function(e){
e.find('.summary').each(function(index) {
var second = $(this).find('.second').data('sumtr');
$(this).find('.second').html('$' + (second).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
});
}
});

Get elements from one class to another class in HTML Table

I need to loop through .mainheader class to .mainheader because i need header class row and values class row value for grouping
This is my html
<table id="t01" cellspacing="0" cellpadding="0" class="table" style="margin-top:20px">
<thead>
<tr>
<th class="sorting">Group_Main_ID</th>
<th class="sorting">Group_Sub_ID</th>
<th class="sorting">Item</th>
<th class="sorting">Instructions</th>
<th class="sorting">Decision_Request_Input</th>
<th class="sorting">Status</th>
<th class="sorting">Evidence_Info</th>
<th class="sorting">Evidence_Doc</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody id="editContents">
<tr id="1" class="mainheader " bgcolor="#000033">
<td id="nonEdit" class="th1 p_no" bgcolor="#215F8B">
<font color="white" align="left"></font>
</td>
<td class="th" bgcolor="#215F8B" align="left" style="color: white; display: table-cell;" colspan="7">
<font color="white" align="left"></font>
Header1</td>
</tr>
<tr id="2" class="header " bgcolor="#000033" style="opacity:0.8">
<td id="nonEdit" class="th1" bgcolor="#215F8B">
<font color="white" align="left"></font>
</td>
<td class="th" bgcolor="#215F8B" align="left" style="color: white; display: table-cell;" colspan="7">
<font color="white" align="left"></font>
SubHeader1</td>
</tr>
<tr class="values">
<td class="sno">1</td>
<td>1</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>null</td>
<td>Yes#No#NA</td>
</tr>
<tr class="values">
<td class="sno">1</td>
<td>1</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>null</td>
<td>Yes#No#NA</td>
</tr>
<tr class="values">
<td class="sno">1</td>
<td>1</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>null</td>
<td>Yes#No#NA</td>
</tr>
<tr id="2" class="header " bgcolor="#000033" style="opacity:0.8">
<td id="nonEdit" class="th1" bgcolor="#215F8B">
<font color="white" align="left"></font>
</td>
<td class="th" bgcolor="#215F8B" align="left" style="color: white; display: table-cell;" colspan="7">
<font color="white" align="left"></font>
Header1.2</td>
</tr>
<tr class="values">
<td class="sno">1</td>
<td>1</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>null</td>
<td>Yes#No#NA</td>
</tr>
<tr id="1" class="mainheader " bgcolor="#000033">
<td id="nonEdit" class="th1 p_no" bgcolor="#215F8B">
<font color="white" align="left"></font>
</td>
<td class="th" bgcolor="#215F8B" align="left" style="color: white; display: table-cell;" colspan="7">
<font color="white" align="left"></font>
Header2</td>
</tr>
<tr id="2" class="header " bgcolor="#000033" style="opacity:0.8">
<td id="nonEdit" class="th1" bgcolor="#215F8B">
<font color="white" align="left"></font>
</td>
<td class="th" bgcolor="#215F8B" align="left" style="color: white; display: table-cell;" colspan="7">
<font color="white" align="left"></font>
SubHeader2.1</td>
</tr>
<tr class="values">
<td class="sno">1</td>
<td>1</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>null</td>
<td>Yes#No#NA</td>
</tr>
</tbody>
</table>
My Javascript
var groupData = {};
var subGroupData = {};
var arr = [];
$('#t01 tbody tr.mainheader').each(function(i) {
var groupIdData ={};
groupIdData['id'] = $(this).attr('id');
groupIdData['name'] = $(this).find('td:eq(2)').text().trim()
groupIdData["action"]= 'Add/Edit/Delete'
//arr.push(garr)
groupData['group'] = groupIdData;
groupData['subgrps'] = [];
subGroupData = {};
subGroupData["action"]= 'Add/Edit/Delete'
subGroupData['id'] =$(this).next('.header').attr('id');
subGroupData['name']= $(this).next('.header').find('td:eq(2)').text().trim();
//arr.push(garr)
groupData['subgrps'].push(subGroupData)
subGroupData['items'] = [];
var items = [];
$(this).next('tr').each(function(){
if($(this).hasClass('values'))
{
var rowData = {};
$(this).find('td').each(function(i) {
var thh = $(this).closest('table').find('th').eq($(this).index()).text();
if(i == 0)
rowData["Action"]='Add/Edit/Delete'
if(i>1)
rowData[thh]=$(this).text().trim()
});
//arr.push(garr)
items.push(rowData)
}
else
return
});
//console.log('over')
}
subGroupData['items'].push(items);
groupData['subgrps'].push(subGroupData);
arr.push(groupData);
});
alert(JSON.stringify(arr)) ;
My Fiddle
https://jsfiddle.net/694kjj3o/
I am expecting JSON look like this
[
{
"group": {
"value": "Header1"
},
"subgrps": [
{
"name": {
"value": "SubHeader1.1"
},
"items": [
[
{
"value": {
"Group_Main_ID": 1,
"Group_Sub_ID": 5,
"Item": "4",
"Instructions": null,
"Decision_Request_Input": null,
"Status": null,
"Evidence_Info": null,
"Evidence_Doc": null
}
}
],
[
{
"value": {
"Group_Main_ID": 1,
"Group_Sub_ID": 5,
"Item": "4",
"Instructions": null,
"Decision_Request_Input": null,
"Status": null,
"Evidence_Info": null,
"Evidence_Doc": null
}
}
]
]
},
{
"name": {
"value": "SubHeader1.2"
},
"items": [
[
{
"value": {
"Group_Main_ID": 1,
"Group_Sub_ID": 5,
"Item": "4",
"Instructions": null,
"Decision_Request_Input": null,
"Status": null,
"Evidence_Info": null,
"Evidence_Doc": null
}
}
]
]
}
]
},
{
"group": {
"value": "Header2"
},
"subgrps": [
{
"name": {
"value": "Header2.1"
},
"items": [
[
{
"value": {
"Group_Main_ID": 1,
"Group_Sub_ID": 5,
"Item": "4",
"Instructions": null,
"Decision_Request_Input": null,
"Status": null,
"Evidence_Info": null,
"Evidence_Doc": null
}
}
]
]
}
]
}
]
I am unable loop it . Kindly guide me in this situation

Try
var arr = [];
$('#t01 tbody tr.mainheader').each(function (i) {
var $main = $(this),
main = {
"group": {
"value": $main.text().trim()
},
"subgrps": []
};
console.group($main.text().trim());
console.log(this);
$main.nextUntil('.mainheader', '.header').each(function () {
var $header = $(this),
header = {
"name": {
"value": $header.text().trim()
},
"items": []
};
console.group($header.text().trim());
console.log(this);
$header.nextUntil('.mainheader, .header', '.values').each(function (i) {
var $tr = $(this),
$tds = $tr.children(),
obj = {
"value": {
"Group_Main_ID": $tds.eq(0).text().trim(),
"Group_Sub_ID": $tds.eq(1).text().trim(),
"Item": $tds.eq(2).text().trim(),
"Instructions": null,
"Decision_Request_Input": null,
"Status": null,
"Evidence_Info": null,
"Evidence_Doc": null
}
};
console.group(i);
console.log(this);
header.items.push(obj);
console.groupEnd();
});
main.subgrps.push(header);
console.groupEnd();
});
arr.push(main);
console.groupEnd();
});
console.log(arr)
console.log(JSON.stringify(arr));
Demo: Fiddle
If you want to get dynamic key and values
var arr = [];
$('#t01 tbody tr.mainheader').each(function (i) {
var $main = $(this),
main = {
"group": {
"action":'Add/Edit/Delete',
"value": $main.text().trim()
},
"subgrps": []
};
//console.group($main.text().trim());
//console.log(this);
$main.nextUntil('.mainheader', '.header').each(function () {
var $header = $(this);
header = {
"name": {
"action":'Add/Edit/Delete',
"value": $header.text().trim()
},
"items": []
};
//console.group($header.text().trim());
//console.log(this);
$header.nextUntil('.mainheader, .header', '.values').each(function (i) {
var $tr = $(this);
obj = {};
obj.action = 'Add/Edit/Delete';
var sobj = {}
$tr.find('td').each(function (i) {
var thh = $(this).closest('table').find('th').eq($(this).index()).text();
sobj[thh] = $(this).text().trim()
});
obj.value = sobj;
//console.group(i);
//console.log(this);
header.items.push(obj);
//console.groupEnd();
});
main.subgrps.push(header);
//console.groupEnd();
});
arr.push(main);
//console.groupEnd();
});
//console.log(arr)
console.log(JSON.stringify(arr));
DEMO
https://jsfiddle.net/95nqr6op/6/

Your code is having extra closing curly bracket }.
I Updated the code. There are some errors I found on the console.
$('#t01 tbody tr.mainheader').each(function(i) {
var groupIdData = {};
groupIdData['id'] = $(this).attr('id');
groupIdData['name'] = $(this).find('td:eq(2)').text().trim()
groupIdData["action"] = 'Add/Edit/Delete'
//arr.push(garr)
groupData['group'] = groupIdData;
groupData['subgrps'] = [];
subGroupData = {};
subGroupData["action"] = 'Add/Edit/Delete'
subGroupData['id'] = $(this).next('.header').attr('id');
subGroupData['name'] = $(this).next('.header').find('td:eq(2)').text().trim();
//arr.push(garr)
groupData['subgrps'].push(subGroupData)
subGroupData['items'] = [];
var items = [];
$(this).next('tr').each(function() {
if ($(this).hasClass('values')) {
var rowData = {};
$(this).find('td').each(function(i) {
var thh = $(this).closest('table').find('th').eq($(this).index()).text();
if (i == 0)
rowData["Action"] = 'Add/Edit/Delete'
if (i > 1)
rowData[thh] = $(this).text().trim()
});
//arr.push(garr)
items.push(rowData)
} else
return
});
//console.log('over')
subGroupData['items'].push(items);
groupData['subgrps'].push(subGroupData);
arr.push(groupData);
});

Sum total for column in jQuery

The following code isn't working. I need to sum all by column as you can see on jsfiddle. What's going wrong?
HTML
<table id="sum_table" width="300" border="1">
<tr>
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
</tr>
<tr>
<td class="rowDataSd">1</td>
<td class="rowDataSd">2</td>
<td class="rowDataSd">3</td>
</tr>
<tr>
<td class="rowDataSd">1</td>
<td class="rowDataSd">2</td>
<td class="rowDataSd">3</td>
</tr>
<tr>
<td class="rowDataSd">1</td>
<td class="rowDataSd">2</td>
<td class="rowDataSd">3</td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
</tr>
</table>
Javascript
$(document).ready(function(){
$(".rowDataSd").each(function() {
newSum.call(this);
});
});
function newSum() {
var $table = $(this).closest('table');
var total = 0;
$(this).attr('class').match(/(\d+)/)[1];
$table.find('tr:not(.totalColumn) .rowDataSd').each(function() {
total += parseInt($(this).html());
});
$table.find('.totalColumn td:nth-child('')').html(total);
}

Here is a jsffile. hope this helps
<table id="sum_table" width="300" border="1">
<tr class="titlerow">
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
</tr>
<tr>
<td class="rowDataSd">1</td>
<td class="rowDataSd">2</td>
<td class="rowDataSd">3</td>
</tr>
<tr>
<td class="rowDataSd">1</td>
<td class="rowDataSd">2</td>
<td class="rowDataSd">3</td>
</tr>
<tr>
<td class="rowDataSd">1</td>
<td class="rowDataSd">5</td>
<td class="rowDataSd">3</td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
</tr>
</table>
<script>
var totals=[0,0,0];
$(document).ready(function(){
var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");
$dataRows.each(function() {
$(this).find('.rowDataSd').each(function(i){
totals[i]+=parseInt( $(this).html());
});
});
$("#sum_table td.totalCol").each(function(i){
$(this).html("total:"+totals[i]);
});
});
</script>

jsFiddle with example
To achieve this, we can take full advantage of the thead and tfoot tags within the table element. With minor changes, we have the following:
HTML
<table id="sum_table" width="300" border="1">
<thead>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Watermelon</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tfoot>
<tr>
<td>Total:</td>
<td>Total:</td>
<td>Total:</td>
</tr>
</tfoot>
</table>​​​​​​​​​​​​​​​
This then allows us to target more specifically the elements we want, i.e. how many columns are there, and what is the "total" cell.
JavaScript
$(document).ready(function()
{
$('table thead th').each(function(i)
{
calculateColumn(i);
});
});
function calculateColumn(index)
{
var total = 0;
$('table tr').each(function()
{
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value))
{
total += value;
}
});
$('table tfoot td').eq(index).text('Total: ' + total);
}​

$('#sum_table tr:first td').each(function(){
var $td = $(this);
var colTotal = 0;
$('#sum_table tr:not(:first,.totalColumn)').each(function(){
colTotal += parseInt($(this).children().eq($td.index()).html(),10);
});
$('#sum_table tr.totalColumn').children().eq($td.index()).html('Total: ' + colTotal);
});
Live example: http://jsfiddle.net/unKDk/7/

An alternate way:
$(document).ready(function(){
for (i=0;i<$('#sum_table tr:eq(0) td').length;i++) {
var total = 0;
$('td.rowDataSd:eq(' + i + ')', 'tr').each(function(i) {
total = total + parseInt($(this).text());
});
$('#sum_table tr:last td').eq(i).text(total);
}
});
Example: http://jsfiddle.net/lucuma/unKDk/10/

This is easily accomplished with a little tweaking of the classes on your table:
HTML:
<table id="sum_table" width="300" border="1">
<tr>
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
</tr>
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
<td class="col3">3</td>
</tr>
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
<td class="col3">3</td>
</tr>
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
<td class="col3">3</td>
</tr>
<tr>
<td class="total">Total:</td>
<td class="total">Total:</td>
<td class="total">Total:</td>
</tr>
</table>​
JS:
var getSum = function (colNumber) {
var sum = 0;
var selector = '.col' + colNumber;
$('#sum_table').find(selector).each(function (index, element) {
sum += parseInt($(element).text());
});
return sum;
};
$('#sum_table').find('.total').each(function (index, element) {
$(this).text('Total: ' + getSum(index + 1));
});
http://jsfiddle.net/unKDk/9/

I know this has been well answered by now, but I started working on this solution earlier before all the answers came through and wanted to go ahead and post it.
This solution works with the HTML as you posted it, and assumes 4 things: 1) the first row is the header row, 2) the last row is the totals row, 3) each row has equal columns, and 4) the columns contain integers. In this case, only the table needs to be identified.
$(document).ready(function(){
totalRows("#sum_table");
});
function totalRows(tableSelector) {
var table = $(tableSelector);
var rows = table.find("tr");
var val, totals = [];
//loop through the rows getting values in the rowDataSd columns
rows
.each(function(rIndex) {
if (rIndex > 0 && rIndex < (rows.length-1)) { //not first or last row
//loop through the columns
$(this).find("td").each(function(cIndex) {
val = parseInt($(this).html());
(totals.length>cIndex) ? totals[cIndex]+=val : totals.push(val);
});
}
})
.last().find("td").each(function(index) {
val = (totals.length>index) ? totals[index] : 0;
$(this).html( "Total: " + val );
});
}
​
​

Here you go sir! http://jsfiddle.net/47VDK/

Categories

Resources