how to join rows in table [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm looking for help with my project.I want to convert my HTML table
from:
A B C D E F
217 x
221 x
275 x
275 x
290 x x
to:
A B C D E F
217 x
221 x
275 x x
290 x x
In the first table there are 2 rows with number 275,How do I merge them together ?


For html table use a hashmap to track unique rows as you loop through the rows once. As duplicates are found you merge the text with stored row and remove the duplicate
var uniqueRows = {};
$('tbody tr').each(function(){
var $row = $(this),
num = $row.find('td:first').text().trim();
if(!uniqueRows[num]){
// store this row object for future text merge
uniqueRows[num] = $row
}else{
// match found, merge the text
uniqueRows[num].find('td').text(function(i, existText){
return existText ? existText : $row.find('td').eq(i).text()
});
$row.remove();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
</th>
<th>A
</th>
<th>B
</th>
<th>C
</th>
<th>D
</th>
<th>E
</th>
<th>F
</th>
</tr>
</thead>
<tbody>
<tr>
<td>217</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
</tr>
<tr>
<td>221</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
</tr>
<tr>
<td>275</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
<td></td>
</tr>
<tr>
<td>275</td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>275</td>
<td></td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>290</td>
<td>x</td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>


Third alternative - saving the content and rewriting
$(function() {
let cont = {};
$("table>tbody>tr").each(function(_, row) {
var key = $("td:first", row).text();
if (cont[key] == undefined) cont[key] = [];
$("td", row).each(function(i,cell) {
let text = $.trim(cell.innerText);
if (cont[key][i] == undefined || cont[key][i] =="") cont[key][i] = text;
});
});
$("table>tbody").empty();
$.each(cont,function(key,arr) {
$("table>tbody").append("<tr><td>"+arr.join("</td><td>")+"</td></tr>");
})
});
td {
border: 1px solid black
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
</tr>
</thead>
<tbody>
<tr>
<td>217</td>
<td></td>
<td></td>
<td> </td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>221</td>
<td></td>
<td></td>
<td> </td>
<td>x</td>
<td></td>
</tr>
<tr>
<td>275</td>
<td> </td>
<td></td>
<td>x</td>
<td> </td>
<td>x</td>
</tr>
<tr>
<td>275</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td></td>
</tr>
<tr>
<td>290</td>
<td>x</td>
<td></td>
<td>x</td>
<td> </td>
<td></td>
</tr>
</tbody>
</table>


Try the following:
It will search for duplicated words in the first td in each tr. If match then it will move the content to the first tr and then remove the duplicated tr
var arr = [];
$("table tbody tr").each(function() {
arr.push($(this).find("td:first").text())
})
var sorted_arr = arr.slice().sort();
var results = [];
for (var i = 0; i < arr.length - 1; i++) {
if (sorted_arr[i + 1] == sorted_arr[i]) {
results.push(sorted_arr[i]);
}
}
$.each(results, function(i, x) {
var tr = $("table tbody tr td:contains(" + x + "):first").parent()
$(tr).nextAll("tr").find("td:contains(" + x + "):first").each(function(k, l) {
var s = $(l).parent();
$(s).children("td").each(function(t, u) {
if ($(u).text() == "x") {
var td = $(tr).find("td:eq(" + t + ")")
td.text(td.text() + $(u).text())
}
})
s.remove();
})
})
var arr = [];
$("table tbody tr").each(function() {
arr.push($(this).find("td:first").text())
})
var sorted_arr = arr.slice().sort();
var results = [];
for (var i = 0; i < arr.length - 1; i++) {
if (sorted_arr[i + 1] == sorted_arr[i]) {
results.push(sorted_arr[i]);
}
}
$.each(results, function(i, x) {
var tr = $("table tbody tr td:contains(" + x + "):first").parent()
$(tr).nextAll("tr").find("td:contains(" + x + "):first").each(function(k, l) {
var s = $(l).parent();
$(s).children("td").each(function(t, u) {
if ($(u).text() == "x") {
var td = $(tr).find("td:eq(" + t + ")")
td.text(td.text() + $(u).text())
}
})
s.remove();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
</th>
<th>A
</th>
<th>B
</th>
<th>C
</th>
<th>D
</th>
<th>E
</th>
<th>F
</th>
</tr>
</thead>
<tbody>
<tr>
<td>217</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
</tr>
<tr>
<td>221</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
</tr>
<tr>
<td>275</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>x</td>
<td></td>
</tr>
<tr>
<td>275</td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>275</td>
<td></td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>290</td>
<td>x</td>
<td></td>
<td>x</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Related

Getting the count of unique values for elements with regex in datatable

I have a data table that has a structure like:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers0">12345</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers1">12345</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers2">4566</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers3">12345</td>
<td></td>
</tr>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers4">2566</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers5">4566"</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers6">12345</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers7">12345</td>
<td></td>
</tr>
</tbody>
</table>
I want to have the count of the unique values present in the elements with id starting from "invNumbers".
Duplicate values should be only counted once. So here the output should be
Count = 3 . As I have only 3 unique values i.e. 12345,4566,2566.

Here are 3 versions
ES6 with fat arrows
ES2015 with function
Legacy JS which should run from IE8 or so
const uniqueCount = [...document.querySelectorAll("td[id^=invNumbers]")]
.reduce((acc, cur) => {
const val = cur.textContent;
if (!acc.includes(val)) acc.push(val);
return acc;
}, []).length;
console.log(uniqueCount)
// no fat arrows =>
const uniqueCount1 = [...document.querySelectorAll("td[id^=invNumbers]")]
.reduce(function(acc, cur) {
const val = cur.textContent;
if (!acc.includes(val)) acc.push(val);
return acc;
}, []).length;
console.log(uniqueCount1)
// Legacy - not ES2015 or ES6
var cells = document.querySelectorAll("td[id^=invNumbers]"); // supported since IE9 or so
var arr = [];
for (var i = 0; i < cells.length; i++) {
var val = cells[i].innerText;
if (arr.indexOf(val) ===-1) arr.push(val);
}
console.log(arr.length)
<table>
<tbody>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers0">12345</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers1">12345</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers2">4566</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers3">12345</td>
<td></td>
</tr>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers4">2566</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers5">4566</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers6">12345</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers7">12345</td>
<td></td>
</tr>
</tbody>
</table>

You could try something like this:
var arr = $('td[id^=invNumbers]').map(function() {
return $(this).text()
}).get();
var unique = arr.filter(function(v, i, a) {
return a.indexOf(v) === i
});
Demo
var arr = $('td[id^=invNumbers]').map(function() {
return $(this).text()
}).get();
var unique = arr.filter(function(v, i, a) {
return a.indexOf(v) === i
});
console.log(unique);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers0">12345</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers1">12345</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers2">4566</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers3">12345</td>
<td></td>
</tr>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers4">2566</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers5">4566</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers6">12345</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers7">12345</td>
<td></td>
</tr>
</tbody>
</table>

HTML Table : addition of value from one column(each row) and 2nd column and dispaly it on third column

(Table will be fetched from database so it will be having N number of rows)
I could get the result on console using 'td:nth-child(7)' but I want in on change of 'td:nth-child(5)' or 'td:nth-child(6)'
Here i am getting console value but cant get it in column text
http://jsfiddle.net/adwaitrao/s78y031x/11/
$(".btn").click(function() {
var $row = $(this).parents('tr');
var text0 = $row.find('td:nth-child(5)').text();
var text1 = $row.find('td:nth-child(6)').text();
var str = $row.find('td:nth-child(7)').text();
var res = +text0 + +text1;
console.log(res);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table width="100%" border="1">
<tr>
<td>Sr</td>
<td>Product name</td>
<td>Variants</td>
<td>Attributes</td>
<td>Price</td>
<td>Qty</td>
<td>Result </td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Product1</td>
<td>department1</td>
<td>Colorred</td>
<td contenteditable>4</td>
<td contenteditable>720</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>
<tr>
<td>2</td>
<td>Product2</td>
<td>department2</td>
<td>Colorgreen</td>
<td contenteditable>6</td>
<td contenteditable>900</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>

You mean
function show() {
var $row = $(this).parents('tr');
var text0 = $row.find('td:nth-child(5)').text();
var text1 = $row.find('td:nth-child(6)').text();
var str = $row.find('td:nth-child(7)').text();
var res = +text0 + +text1;
console.log(res);
}
$(".btn").on("click",show);
$("[contenteditable]").on("input",show)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table width="100%" border="1">
<tr>
<td>Sr</td>
<td>Product name</td>
<td>Variants</td>
<td>Attributes</td>
<td>Price</td>
<td>Qty</td>
<td>Result </td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Product1</td>
<td>department1</td>
<td>Colorred</td>
<td contenteditable>4</td>
<td contenteditable>720</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>
<tr>
<td>2</td>
<td>Product2</td>
<td>department2</td>
<td>Colorgreen</td>
<td contenteditable>6</td>
<td contenteditable>900</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>

Jquery or Javascript create ranking column based from total

I want to compute and fill the ranking in the image below based on the total. How will be able to achieve this using js/jquery?.
I have created the table manually (dynamically also) using HTML. I also have button to generate the rank (which I know how to do it). I just want to have a function or way to add rank to my column.
So that rank should be in order (1, 2, 2, 3).
<table id="table" class="table table-stripe table-bordered">
<thead>
<tr>
<td class="d-none">ID</td>
<td>Name</td>
<td>Crit1</td>
<td>Crit2</td>
<td>Crit3</td>
<td>Crit4</td>
<td>Crit5</td>
<td>Total</td>
<td>Rank</td>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none">2</td>
<td>aaaa</td>
<td>20</td>
<td>0</td>
<td>50</td>
<td>0</td>
<td>0</td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">3</td>
<td>Greggggg</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">4</td>
<td>Jjjjoohhn</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">5</td>
<td>asdada</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
</tbody>
</table>
Any help will be appreciated.

You have to organise the total score by getting all the values, sort and remove duplicates.
And you can assign the rank value by $('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
You can do something like:
$(function() {
//Get all total values, sort and remove duplicates
let totalList = $(".total")
.map(function() {return $(this).text()})
.get()
.sort(function(a,b){return a - b })
.reduce(function(a, b) {if (b != a[0]) a.unshift(b);return a}, [])
//Assign rank
totalList.forEach((v, i) => {
$('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table table-stripe table-bordered">
<thead>
<tr>
<td class="d-none">ID</td>
<td>Name</td>
<td>Crit1</td>
<td>Crit2</td>
<td>Crit3</td>
<td>Crit4</td>
<td>Crit5</td>
<td>Total</td>
<td>Rank</td>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none">2</td>
<td>aaaa</td>
<td>20</td>
<td>0</td>
<td>50</td>
<td>0</td>
<td>0</td>
<td class="total">80</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">3</td>
<td>Greggggg</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">65</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">4</td>
<td>Jjjjoohhn</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">65</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">5</td>
<td>asdada</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">50</td>
<td class="Rank"></td>
</tr>
</tbody>
</table>
You can even make it shorter like
$(".total")
.map(function(){return $(this).text()})
.get()
.sort(function(a,b){return a - b })
.reduce(function(a, b){ if (b != a[0]) a.unshift(b); return a }, [])
.forEach((v,i)=>{
$('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
});

How to limit table search to specific rows that contain specific text in a column

I am searching in my table with a function:
//search field for table
$("#search_field").keyup(function() {
var value = this.value;
$("#menu_table").find("tr").each(function(index) {
if (index === 0) return;
var id = $(this).find("td").text();
$(this).toggle(id.indexOf(value) !== -1);
});});
Fourth coulmn of data is Type i.e. Chicken, Kebabs etc.
I want to search only in those rows whose 4th column contains ('Chicken'). It should not search in rows whose Type is 'Kebabs'. The code above is searching in all rows.

You can filter the rows and apply your code only to the filtered row like in:
$('#menu_table tr:gt(0)').filter(function(idx, ele) {
return $(ele).find('td:eq(3)').text() == 'Chicken';
}).each(function(index, ele) {
var id = $(this).find("td").text();
$(this).toggle(id.indexOf(value) !== -1);
});
Another way to filter is based on :nth-child() Selector:
$('#menu_table tr:gt(0) td:nth-child(4)').filter(function(idx, ele) {
return ele.textContent == 'Chicken';
}).closest('tr').each(function(index, ele) {
var id = $(this).find("td").text();
$(this).toggle(id.indexOf(value) !== -1);
});
$('#menu_table tr:gt(0) td:nth-child(4)').filter(function(idx, ele) {
return ele.textContent == 'Chicken';
}).closest('tr').each(function(index, ele) {
var id = $(this).find("td:first").text();
var typ = $(this).find("td:eq(3)").text();
console.log('ID:' + id + ' Type: ' + typ);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="menu_table">
<thead>
<tr>
<th class="centerText" data-field="item_id">ID</th>
<th class="centerText" data-field="name">Name</th>
<th class="centerText" data-field="price">Price</th>
<th class="centerText" data-field="type">Type</th>
<th class="centerText" data-field="image">Image</th>
<th class="centerText" data-field="description">Description</th>
<th class="centerText" data-field="cooking">Instructions</th>
<th class="centerText" data-field="ingredients">Ingredients</th>
<th class="centerText" data-field="warnings">Warnings</th>
<th class="centerText" data-field="Storage">Storage</th>
<th class="centerText" data-field="Size">Size</th>
<th class="centerText" data-field="edit">Edit</th>
<th class="centerText" data-field="delete">Delete</th>
</tr>
</thead>
<tbody style="text-align:center;" id="menu_table_data">
<tr>
<td>1</td>
<td>name</td>
<td>price</td>
<td>type</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
<tr>
<td>2</td>
<td>name</td>
<td>price</td>
<td>type</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
<tr>
<td>3</td>
<td>name</td>
<td>price</td>
<td>not Chicken</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
<tr>
<td>4</td>
<td>name</td>
<td>price</td>
<td>Chicken</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
</tbody>
</table>

Use jQuery :contains(text) selector.
$("#menu_table").find("tr:contains('Chicken')").each(function(index) {
if($(this).children('td').eq(3).text() == "Chicken"){
/* Do something */
}
});
Working example: https://jsfiddle.net/kvvnjmup/4/
$('#menu_table').find('tr:contains("Chicken")').each(function(){
if($(this).children('td').eq(3).text() == "Chicken"){
alert($(this).prop('id'));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="menu_table">
<tbody><tr id="1">
<td></td>
<td></td>
<td></td>
<td>Chicken</td>
<td></td>
</tr>
<tr id="2">
<td></td>
<td></td>
<td></td>
<td>Chicken</td>
<td></td>
</tr>
<tr id="3">
<td></td>
<td></td>
<td></td>
<td>pasta</td>
<td></td>
</tr>
<tr id="4">
<td></td>
<td></td>
<td>Chicken</td>
<td>pasta</td>
<td></td>
</tr>
</tbody>
</table>

javascript: NaN when getting average

So I followed this fiddle: http://jsfiddle.net/4h6w64d8/2/
but unfortunately when I tried the code the average is NaN.
In the fiddle even though a column has no value it will still calculate and display the average. However when I tried it, it will only display NaN.
This is my html:
<table id="scorecard_student" class="table table-striped table-bordered">
<thead>
<tr>
<th>Code </th>
<th>PO 1</th>
<th>PO 2</th>
<th>PO 3</th>
<th>PO 4</th>
<th>PO 5</th>
<th>PO 6</th>
<th>PO 7</th>
<th>PO 8</th>
<th>PO 9</th>
</tr>
</thead>
<tbody>
<tr>
<td width="7%">ICT117</td>
<td></td>
<td></td>
<td></td>
<td>2.0</td>
<td></td>
<td>2.0</td>
<td></td>
<td></td>
<td>1.5</td>
</tr>
<tr>
<td width="7%">ICT118</td>
<td></td>
<td></td>
<td>2.0</td>
<td>2.0</td>
<td></td>
<td></td>
<td></td>
<td>2.0</td>
<td>1.5</td>
</tr>
<tr>
<td width="7%">ICT110</td>
<td>3.0</td>
<td>2.0</td>
<td></td>
<td></td>
<td></td>
<td>2.0</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td width="7%">ICT111</td>
<td></td>
<td></td>
<td></td>
<td>2.0</td>
<td>2.0</td>
<td>2.0</td>
<td>1.5</td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="#FFF380">
<td>
<center>Average</center>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
My js:
<script type="text/javascript">
var table = document.getElementById('scorecard_student'),
rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr'),
footer = table.getElementsByTagName('tfoot')[0];
for (var i = 1; i <= <? php echo $po_count; ?> ; i++) {
var sum = numOfValues = 0;
for (var j = 0, l = rows.length; j < l; j++) {
try {
sum += parseFloat(
rows[j].getElementsByTagName('td')[i]
.innerHTML
);
numOfValues++;
} catch (e) {}
}
var avg = sum / numOfValues;
footer.getElementsByTagName('td')[i]
.innerHTML = Math.round(avg * 100) / 100;
}
</script>
Update, I think I got it now.
if (rows[j].getElementsByTagName('td')[i].innerHTML != '') {
sum += parseFloat(
rows[j].getElementsByTagName('td')[i]
.innerHTML
) || 0;
numOfValues++;
}

In some cases you get blank text, you need to skip it:
sum += parseFloat(
rows[j].getElementsByTagName('td')[i]
.innerHTML
) || 0; //<--

Categories

Resources