Get value of only that style attribute who have font family

Get value of only that style attribute who have font family - javascript

Html Code:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td style="font-family:Helvetica,Arial,sans-serif;font-size:13px;">Jill</td>
<td>Smith</td>
<td style="font-family:Helvetica,Arial,sans-serif;font-size:13px;">50</td>
</tr>
<tr>
<td style="font-family:Helvetica,Arial,sans-serif;font-size:13px;">Eve</td>
<td>Jackson</td>
<td style="font-family:Helvetica,Arial,sans-serif;font-size:13px; color:#666; font-weight:bold;
text-decoration:none;margin:0;padding:0;text-align:left;white-space:nowrap;">94</td>
</tr>
</table>
Javascript Code:
<script>
var tg_name = document.getElementsByTagName("td");
var l_tgname = tg_name.length;
array_get = [];
for(h=0;h<=l_tgname;h++){
var val_gt_chck = document.getElementsByTagName("td")[h].hasAttribute("style");
if(val_gt_chck){
var val_gt = document.getElementsByTagName("td")[h].getAttribute("style");
if(val_gt!==null && val_gt !== ''){
check_words = val_gt.includes('font-family');
if(check_words){
alert(val_gt);
array_get.push(val_gt);
}
}
}
}
alert(array_get);
</script>
I wanted to combine all the data in one variable and access that variable outside the loop.It give the error that "Cannot read property 'has Attribute' of undefined"

There was wrong for condition and includes replaced by indexOf for better compatibility:
var tg_name = document.getElementsByTagName("td");
var l_tgname = tg_name.length;
array_get = [];
for(h=0;h<l_tgname;h++){
var val_gt_chck = document.getElementsByTagName("td")[h].hasAttribute("style");
if(val_gt_chck){
var val_gt = document.getElementsByTagName("td")[h].getAttribute("style");
if(val_gt!==null && val_gt !== ''){
check_words = val_gt.indexOf('font-family:') > -1;
if(check_words){
console.log(val_gt);
array_get.push(val_gt);
}
}
}
}
console.log(array_get);
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td style="font-family:Helvetica,Arial,sans-serif;font-size:13px;">Jill</td>
<td>Smith</td>
<td style="font-family:Helvetica,Arial,sans-serif;font-size:13px;">50</td>
</tr>
<tr>
<td style="font-family:Helvetica,Arial,sans-serif;font-size:13px;">Eve</td>
<td>Jackson</td>
<td style="font-family:Helvetica,Arial,sans-serif;font-size:13px; color:#666; font-weight:bold;
text-decoration:none;margin:0;padding:0;text-align:left;white-space:nowrap;">94</td>
</tr>
</table>

Related

Javascript Filtering by multiple columns

Borrowing code from the post below I am able to filter on 2 columns using the || (Or) operator.
However, I'd like to be able to filter using the && (And) operator.
I have been unsuccessful in my multiple attempts. I could use some help.
Filtering table multiple columns
function myFunction() {
var input0, input1, filter0, filter1, table, tr, td, cell, i, j;
document.getElementById("myInput0").value = 'Female';
document.getElementById("myInput1").value = 'Engineering';
input0 = document.getElementById("myInput0");
input1 = document.getElementById("myInput1");
filter0 = input0.value.toUpperCase();
filter1 = input1.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
// Hide the row initially.
tr[i].style.display = "none";
td = tr[i].getElementsByTagName("td");
for (var j = 0; j < td.length; j++) {
cell = tr[i].getElementsByTagName("td")[j];
if (cell) {
if (cell.textContent.toUpperCase().indexOf(filter0)>-1 ||
cell.textContent.toUpperCase().indexOf(filter1)>-1) {
tr[i].style.display = "";
break;
}
}
}
}
}
<body>
<input type="text" id="myInput0">
<input type="text" id="myInput1">
<input type='button' onclick='myFunction()' value='click me' />
<table id="myTable">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>Male</td>
<td>Sales</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>Female</td>
<td>Service</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>Female</td>
<td>Service</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>Female</td>
<td>Engineering</td>
</tr>
<tr>
<td>Thomas</td>
<td>Dubois</td>
<td>Male</td>
<td>Sales</td>
</tr>
<tr>
<td>Deidre</td>
<td>Masters</td>
<td>Female</td>
<td>Sales</td>
</tr>
<tr>
<td>Sean</td>
<td>Franken</td>
<td>Male</td>
<td>Engineering</td>
</tr>
</tbody>
</table>
</body>

For each cell, you can check each filter separately, then only change the DOM for rows where all filter conditions are met.
(This example uses a restructured version of your code.)
document.getElementById("myInput0").value = 'Female';
document.getElementById("myInput1").value = 'Engineering';
const
input0 = document.getElementById("myInput0"),
input1 = document.getElementById("myInput1"),
table = document.getElementById("myTable"),
rows = table.getElementsByTagName("tr");
function myFunction() {
filter0 = input0.value.toUpperCase(),
filter1 = input1.value.toUpperCase();
for (let row of rows) {
row.classList.add("hidden");
const cells = row.getElementsByTagName("td");
let
filter0met = false,
filter1met = false;
for (let cell of cells) {
if (cell.textContent.toUpperCase().includes(filter0)) {
filter0met = true;
}
if (cell.textContent.toUpperCase().includes(filter1)) {
filter1met = true;
}
}
if (filter0met && filter1met) {
row.classList.remove("hidden");
}
}
}
.hidden {
display: none;
}
<body>
<input type="text" id="myInput0"><input type="text" id="myInput1"><input type='button' onclick='myFunction()' value='click me' />
<table id="myTable">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>Male</td>
<td>Sales</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>Female</td>
<td>Service</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>Female</td>
<td>Service</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>Female</td>
<td>Engineering</td>
</tr>
<tr>
<td>Thomas</td>
<td>Dubois</td>
<td>Male</td>
<td>Sales</td>
</tr>
<tr>
<td>Deidre</td>
<td>Masters</td>
<td>Female</td>
<td>Sales</td>
</tr>
<tr>
<td>Sean</td>
<td>Franken</td>
<td>Male</td>
<td>Engineering</td>
</tr>
</tbody>
</table>
</body>

After much trial and error for I was able to put together some JQuery that will dynamically search the first input, and then search those results for the second input. Note, I am using SP2016. While I've included it here in my post, I could not get the call to "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" to work. I found downloading and storing the file on my SharePoint site worked. For my requirement I wanted to display my list with grouped rows so I'm using a function to collapse the groups on load. The caveat is the groups in listview have to be configured as expanded.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!DOCTYPE html>
<html>
<head>
<SCRIPT type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></SCRIPT>
<script>
//If rows are not grouped, remove this function
$(window).load(function () {
$(".ms-commentcollapse-icon").click();
});
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = this.value.toLowerCase();
//If rows are not grouped, remove this line
$(".ms-commentexpand-icon").click();
$('.ms-listviewtable > tbody > tr').addClass('myInputMismatch').filter(function() {
return this.innerHTML.toLowerCase().indexOf(value) > -1;
}).removeClass('myInputMismatch');
});
$("#myInput1").on("keyup", function() {
var value = this.value.toLowerCase();
$('.ms-listviewtable > tbody > tr').addClass('myInput1Mismatch').filter(function() {
return this.innerHTML.toLowerCase().indexOf(value) > -1;
}).removeClass('myInput1Mismatch');
});
});
</script>
<style>
.myInputMismatch, .myInput1Mismatch { display: none; }
</style></head>
<input id="myInput" type="text" Placeholder="Search here 1st..."><input id="myInput1" type="text" Placeholder="Search here 2nd...">

textContent and innerHTML not changing the DOM

Good morning,
I'm hoping someone can help me with this seemingly simple question. I can't figure out why my textContent or innerHTML won't update my DOM. It shows in my console that it has changed, but for some reason that escapes me I can't figure out why the DOM isn't changing. Any help is appreciated!
I have the following code
function updateText() {
document.querySelectorAll('.userRoleStyle').forEach(function (e) {
var grabtext = e.textContent || e.innerHTML;
if (grabtext === 'SUPER') {
grabtext = 'Super User';
}
console.log(grabtext);
})
};
table td {
padding: 10px;
}
<body>
<table>
<thead>
<tr>
<th>Username</th>
<th>Email address</th>
<th>User Role</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST1</td>
<td>test#test.com</td>
<td class="userRoleStyle">ADMINISTRATOR</td>
<td>
Test
</td>
</tr>
<tr class="userList">
<td>TEST2</td>
<td>test#test.com</td>
<td class="userRoleStyle">ADMINISTRATOR</td>
<td>
Test
</td>
</tr>
<tr class="userList">
<td>TEST3</td>
<td>test#test.com</td>
<td class="userRoleStyle">SUPER</td>
<td>
Test
</td>
</tr>
</tbody>
</table>
</body>

innerHTML and textContent are basically setters and getters. Getting their reference in a variable and setting value to that reference will not invoke the setter.
You need to set value directly to them
e.textContent ?
( e.textContent == 'SUPER' ? (e.textContent = 'Super User') : "" ) :
( e.innerHTML == 'SUPER' ? (e.innerHTML = 'Super User') : "" )

I have updated the snippet.
You were not assigning the Super User value to e.textContent inside if condition
function updateText() {
document.querySelectorAll('.userRoleStyle').forEach(function (e) {
var grabtext = e.textContent || e.innerHTML;
if (grabtext === 'SUPER') {
e.textContent = 'Super User';
}
})
};
table td {
padding: 10px;
}
<body>
<table>
<thead>
<tr>
<th>Username</th>
<th>Email address</th>
<th>User Role</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST1</td>
<td>test#test.com</td>
<td class="userRoleStyle">ADMINISTRATOR</td>
<td>
Test
</td>
</tr>
<tr class="userList">
<td>TEST2</td>
<td>test#test.com</td>
<td class="userRoleStyle">ADMINISTRATOR</td>
<td>
Test
</td>
</tr>
<tr class="userList">
<td>TEST3</td>
<td>test#test.com</td>
<td class="userRoleStyle">SUPER</td>
<td>
Test
</td>
</tr>
</tbody>
</table>
</body>
Hope this will help

Nothing in your code changes what's in the DOM. Assigning to your grabText variable just changes the value of that variable, not the element you got the text from.
To do that, you'd havE to assign back to textContent/innerHTML.
Separately: innerHTML is very different from textContent. If you're going to feature-detect, use textContent and fall back to innerText, not innerHTML¹. When feature-detecting this, don't just use ||, it can pick the wrong one if the element's text is blank. Instead, look to see if the element has a property with the desired name. You only need to do it once and remember it.
var textPropName = "textContent" in document.createElement("div") ? "textContent" : "innerText";
function updateText() {
document.querySelectorAll('.userRoleStyle').forEach(function(e) {
if (e[textPropName] === 'SUPER') {
e[textPropName] = 'Super User';
}
})
}
var textPropName = "textContent" in document.createElement("div") ? "textContent" : "innerText";
function updateText() {
document.querySelectorAll('.userRoleStyle').forEach(function(e) {
if (e[textPropName] === 'SUPER') {
e[textPropName] = 'Super User';
}
})
}
table td {
padding: 10px;
}
<body>
<table>
<thead>
<tr>
<th>Username</th>
<th>Email address</th>
<th>User Role</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST1</td>
<td>test#test.com</td>
<td class="userRoleStyle">ADMINISTRATOR</td>
<td>
Test
</td>
</tr>
<tr class="userList">
<td>TEST2</td>
<td>test#test.com</td>
<td class="userRoleStyle">ADMINISTRATOR</td>
<td>
Test
</td>
</tr>
<tr class="userList">
<td>TEST3</td>
<td>test#test.com</td>
<td class="userRoleStyle">SUPER</td>
<td>
Test
</td>
</tr>
</tbody>
</table>
</body>
Side note: You don't put ; after function declarations. It's a statement terminator; declarations aren't statements. You'd have one after an assignment statement with a function expression, but not after a declaration. (It's harmless, though.)
¹ textContent and innerText are also different from one another, but the differences don't matter in your case.

How to create a searchbar with JavaScript

Hello Im trying to create a searchbar for my table with javascript and works but with some issues. The problem is when I try to search in two rows. For example if I only search in Name works! but if I search Name and Last Name doesn't work.
Here is my js function
var textbuscar = document.getElementById("buscar");
textbuscar.onkeyup = function() {
buscar(this);
}
function buscar(inputbuscar) {
var valorabuscar = (inputbuscar.value).toLowerCase().trim();
var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
for (var i = 0; i < tabla_tr.length; i++) {
var tr = tabla_tr[i];
var textotr = (tr.innerText).toLowerCase();
tr.className = (textotr.indexOf(valorabuscar) >= 0) ? "mostrar" : "ocultar";
}
}
Here is a runnable copy:
var textbuscar = document.getElementById("buscar");
textbuscar.onkeyup = function(){
buscar(this);
}
function buscar(inputbuscar){
var valorabuscar = (inputbuscar.value).toLowerCase().trim();
var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
for(var i=0; i<tabla_tr.length; i++){
var tr = tabla_tr[i];
var textotr = (tr.innerText).toLowerCase();
tr.className = (textotr.indexOf(valorabuscar)>=0)?"mostrar":"ocultar";
}
}
.mostar{display:block;}
.ocultar{display:none;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<linl rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1 class="page-header">
My Table
</h1>
<!-- TABLA INICIA -->
<table id="tabla" class="table table-striped">
<thead>
<tr>
<th style="width:160px">Nombre</th>
<th>Apellido</th>
<th style="width:220px">Profesion</th>
<th style="width:140px">Sueldo</th>
</tr>
<tr>
<td colspan="4">
<input id="buscar" type="text" class="form-control" placeholder="Escriba algo para filtrar" />
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Perez Patiño</td>
<td>Marketing Empresarial</td>
<td class="text-right">S/. 9000.00</td>
</tr>
<tr>
<td>Alberto</td>
<td>Gonzales Flores</td>
<td>Derecho</td>
<td class="text-right">S/. 4000.00</td>
</tr>
<tr>
<td>Gustavo</td>
<td>Bueno Bravo</td>
<td>Derecho</td>
<td class="text-right">S/. 7000.00</td>
</tr>
<tr>
<td>Enrique</td>
<td>Pacheco Perez</td>
<td>Derecho</td>
<td class="text-right">S/. 12000.00</td>
</tr>
<tr>
<td>Jaime</td>
<td>Andrade Gonzales</td>
<td>Economia</td>
<td class="text-right">S/. 7500.00</td>
</tr>
<tr>
<td>Andrea</td>
<td>Loayza Perez</td>
<td>Medicina Humana</td>
<td class="text-right">S/. 7500.00</td>
</tr>
<tr>
<td>Elvira</td>
<td>Gonzales Perez</td>
<td>Ingeniería de Sistema</td>
<td class="text-right">S/. 7500.00</td>
</tr>
<tr>
<td>Joseph</td>
<td>Rodriguez Pacheco</td>
<td>Ingeniería de Software</td>
<td class="text-right">S/. 8200.00</td>
</tr>
<tr>
<td>Pedro</td>
<td>kuczynski</td>
<td>Economista</td>
<td class="text-right">S/. 250000.00</td>
</tr>
<tr>
<td>Alan</td>
<td>García Perez</td>
<td>Derecho</td>
<td class="text-right">S/. 120000.00</td>
</tr>
<tr>
<td>Jose</td>
<td>Villanueva Salvador</td>
<td>Medicina Humana</td>
<td class="text-right">S/. 2900.00</td>
</tr>
<tr>
<td>Alberto</td>
<td>Lozano García</td>
<td>Medicina Humana</td>
<td class="text-right">S/. 2900.00</td>
</tr>
</tbody>
</table>
<!-- TABLA FINALIZA -->
</div>
</div>
</div>
A demo at jsFiddle to play with.

To give you a headstart, I modified your function a little bit. This still doesn't work the way you want, but it should guide you with an idea:
function buscar(inputbuscar){
var valorabuscar = (inputbuscar.value).toLowerCase().trim();
var arraydevalores = valorabuscar.split(" ");
console.log(arraydevalores); //CHECK WHAT THIS LOGS
var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
console.log(findOne(arraydevalores, tabla_tr));
for(var i=0; i<tabla_tr.length; i++){
var tr = tabla_tr[i];
var textotr = (tr.innerText).toLowerCase();
tr.className = (textotr.indexOf(valorabuscar)>=0)?"mostrar":"ocultar";
}
}
I split your valorabuscar variable where any spaces are, so now you have an array of the terms that the user is searching for sepparately in an array that looks like this:
["juan", "pérez", "patiño"]
This array is easier to manipulate so as to compare it with your table and return whatever's more similar to it. Good luck!
PS: Here's an appropriate question to help you continue: Check if an array contains any element of another array in JavaScript

Sorting pairs of rows with tablesorter

http://jsfiddle.net/9sKwJ/66/
tr.spacer { height: 40px; }
$.tablesorter.addWidget({
id: 'spacer',
format: function(table) {
var c = table.config,
$t = $(table),
$r = $t.find('tbody').find('tr'),
i, l, last, col, rows, spacers = [];
if (c.sortList && c.sortList[0]) {
$t.find('tr.spacer').removeClass('spacer');
col = c.sortList[0][0]; // first sorted column
rows = table.config.cache.normalized;
last = rows[0][col]; // text from first row
l = rows.length;
for (i=0; i < l; i++) {
// if text from row doesn't match last row,
// save it to add a spacer
if (rows[i][col] !== last) {
spacers.push(i-1);
last = rows[i][col];
}
}
// add spacer class to the appropriate rows
for (i=0; i<spacers.length; i++){
$r.eq(spacers[i]).addClass('spacer');
}
}
}
});
$('table').tablesorter({
widgets : ['spacer']
});
<table id="test">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
<th>Another Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test4</td>
<td>4</td>
<td>Hello4</td>
</tr>
<tr>
<td colspan="3">Test4</td>
</tr>
<tr>
<td>Test3</td>
<td>3</td>
<td>Hello3</td>
</tr>
<tr>
<td colspan="3">Test3</td>
</tr>
<tr>
<td>Test2</td>
<td>2</td>
<td>Hello2</td>
</tr>
<tr>
<td colspan="3">Test2</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>Hello1</td>
</tr>
<tr>
<td colspan="3">Test1</td>
</tr>
</tbody>
</table>
This sorts just the way I want it if you sort it by the first column, but the other two columns don't maintain the same paired 'tr' sort im looking for.
Any help on this?

Use the expand-child class name on each duplicated row:
<tr>
<td>Test3</td>
<td>3</td>
<td>Hello3</td>
</tr>
<tr class="expand-child">
<td colspan="3">Test3</td>
</tr>
It's defined by the cssChildRow option:
$('table').tablesorter({
cssChildRow: "expand-child"
});
Here is a demo of it in action.

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/

Develop Reference

JavaScript is the programming language of the Web.

Get value of only that style attribute who have font family - javascript

Related

Javascript Filtering by multiple columns

textContent and innerHTML not changing the DOM

How to create a searchbar with JavaScript

Sorting pairs of rows with tablesorter

Sum total for column in jQuery

Categories

Resources