Develop Reference

How do I hide a table row if there is a null value or a specific value

I'm not much of a javascript coder, but I'm trying to write something to make my work a little easier...
I have a table of data. The third cell of the table ('offersTable') is a display flag, which will either be 'Y', 'N', or empty. The source for the table is incomplete, which is why sometimes the cell is empty (null).
I'm trying to write a small script that will iterate down through the table, and then set the row to hide if the value if the cell is either 'N' or null. That way, only rows which have a 'Y' remain.
Please can someone help me? I'm going out of my mind trying to work this one out!
Sorry, I should have included my code...
<table id="offersTable">
<tr>
<th onclick="sortTable(0)">Lender</th>
<th onclick="sortTable(1)">Lender Code</th>
<th onclick="sortTable(2)">Display</th>
<th onclick="sortTable(3)">Loan Offered</th>
<th onclick="sortTable(4)">Term Offered</th>
<th onclick="sortTable(5)">Approval Probability</th>
<th onclick="sortTable(6)">APR</th>
<th onclick="sortTable(7)">Monthly Repayment</th>
<th onclick="sortTable(8)">Total Repayable</th>
</tr>
<tr id="lender1">
<td id="lender1Name"><script>document.getElementById("lender1Name").innerHTML = offers[0].lender_name;</script>
</td>
<td id="lender1Code"><script>document.getElementById("lender1Code").innerHTML = offers[0].lender_code;</script>
</td>
<td id="lender1Display"><script>document.getElementById("lender1Display").innerHTML = offers[0].display;</script>
</td>
<td id="lender1Value"><script>document.getElementById("lender1Value").innerHTML = offers[0].loan_offered;</script>
</td>
<td id="lender1Term"><script>document.getElementById("lender1Term").innerHTML = offers[0].term_offered;</script>
</td>
<td id="lender1AppProb"><script>document.getElementById("lender1AppProb").innerHTML = offers[0].approval_probability;</script>
</td>
<td id="lender1APR"><script>document.getElementById("lender1APR").innerHTML = offers[0].apr;</script>
</td>
<td id="lender1MonthlyRepay"><script>document.getElementById("lender1MonthlyRepay").innerHTML = offers[0].monthly_repayment;</script>
</td>
<td id="lender1TotalRepay"><script>document.getElementById("lender1TotalRepay").innerHTML = offers[0].total_repayment;</script>
</td>
</tr>
<tr id="lender2">
<td id="lender2Name"><script>document.getElementById("lender2Name").innerHTML = offers[1].lender_name;</script>
</td>
<td id="lender2Code"><script>document.getElementById("lender2Code").innerHTML = offers[1].lender_code;</script>
</td>
<td id="lender2Display"><script>document.getElementById("lender2Display").innerHTML = offers[1].display;</script>
</td>
<td id="lende2Value"><script>document.getElementById("lender2Value").innerHTML = offers[1].loan_offered;</script>
</td>
<td id="lender2Term"><script>document.getElementById("lender2Term").innerHTML = offers[1].term_offered;</script>
</td>
<td id="lender2AppProb"><script>document.getElementById("lender2AppProb").innerHTML = offers[1].approval_probability;</script>
</td>
<td id="lender2APR"><script>document.getElementById("lender2APR").innerHTML = offers[1].apr;</script>
</td>
<td id="lender2MonthlyRepay"><script>document.getElementById("lender2MonthlyRepay").innerHTML = offers[1].monthly_repayment;</script>
</td>
<td id="lender2TotalRepay"><script>document.getElementById("lender2TotalRepay").innerHTML = offers[1].total_repayment;</script>
</td>
</tr>
<tr id="lender3">
<td id="lender3Name"><script>document.getElementById("lender3Name").innerHTML = offers[2].lender_name;</script>
</td>
<td id="lender3Code"><script>document.getElementById("lender3Code").innerHTML = offers[2].lender_code;</script>
</td>
<td id="lender3Display"><script>document.getElementById("lender3Display").innerHTML = offers[2].display;</script>
</td>
<td id="lender3Value"><script>document.getElementById("lender3Value").innerHTML = offers[2].loan_offered;</script>
</td>
<td id="lender3Term"><script>document.getElementById("lender3Term").innerHTML = offers[2].term_offered;</script>
</td>
<td id="lender3AppProb"><script>document.getElementById("lender3AppProb").innerHTML = offers[2].approval_probability;</script>
</td>
<td id="lender3APR"><script>document.getElementById("lender3APR").innerHTML = offers[2].apr;</script>
</td>
<td id="lender3MonthlyRepay"><script>document.getElementById("lender3MonthlyRepay").innerHTML = offers[2].monthly_repayment;</script>
</td>
<td id="lender3TotalRepay"><script>document.getElementById("lender3TotalRepay").innerHTML = offers[2].total_repayment;</script>
</td>
</tr>
<tr id="lender4">
<td id="lender4Name"><script>document.getElementById("lender4Name").innerHTML = offers[3].lender_name;</script>
</td>
<td id="lender4Code"><script>document.getElementById("lender4Code").innerHTML = offers[3].lender_code;</script>
</td>
<td id="lender4Display"><script>document.getElementById("lender4Display").innerHTML = offers[3].display;</script>
</td>
<td id="lender4Value"><script>document.getElementById("lender4Value").innerHTML = offers[3].loan_offered;</script>
</td>
<td id="lender4Term"><script>document.getElementById("lender4Term").innerHTML = offers[3].term_offered;</script>
</td>
<td id="lender4AppProb"><script>document.getElementById("lender4AppProb").innerHTML = offers[3].approval_probability;</script>
</td>
<td id="lender4APR"><script>document.getElementById("lender4APR").innerHTML = offers[3].apr;</script>
</td>
<td id="lender4MonthlyRepay"><script>document.getElementById("lender4MonthlyRepay").innerHTML = offers[3].monthly_repayment;</script>
</td>
<td id="lender4TotalRepay"><script>document.getElementById("lender4TotalRepay").innerHTML = offers[3].total_repayment;</script>
</td>
</tr>
</table>

<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>N</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>N</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<script>
function filterTable(table, cellIndex, filter) {
for (var i = 1, tr; tr = table.rows[i]; i++) { // skip first line
var third_td = tr.cells[cellIndex];
tr.style.display = third_td.innerText === filter ? '' : 'none';
}
}
function filterAllTables(cellIndex, filter) {
var tables = document.getElementsByTagName('table');
if (tables.length > 0) {
for (var i = 0, table; table = tables[i]; i++) {
filterTable(table, cellIndex, filter);
}
}
}
window.addEventListener('load', function () {
filterAllTables(2, 'Y');
});
</script>

I would maybe try css: display: hidden; Also check out this website or research some before posting. https://salesforce.stackexchange.com/questions/122023/hide-html-table-rows-if-outputfield-is-null-or-0 Hope this helps!

without seeing your code is difficult but i know this solution with js:
for (i in document.querySelectorAll('td')) {
if (document.querySelectorAll('td')[i].textContent == 'N' || document.querySelectorAll('td')[i].textContent == 'null' ) {
document.querySelectorAll('td')[i].remove()
}
}
i'm using "remove" only to demonstrate it but you can use style.property...

I went with this option as it worked perfectly, operating in exactly the way that I wanted. Many thanks to René Datenschutz for the solution.
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>N</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>N</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<script>
function filterTable(table, cellIndex, filter) {
for (var i = 1, tr; tr = table.rows[i]; i++) { // skip first line
var third_td = tr.cells[cellIndex];
tr.style.display = third_td.innerText === filter ? '' : 'none';
}
}
function filterAllTables(cellIndex, filter) {
var tables = document.getElementsByTagName('table');
if (tables.length > 0) {
for (var i = 0, table; table = tables[i]; i++) {
filterTable(table, cellIndex, filter);
}
}
}
window.addEventListener('load', function () {
filterAllTables(2, 'Y');
});
</script>

Moving specific tr's into a specific td with javascript

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

localstorage setitem for every block in <table>

I have this contenteditable table on my website.
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1></td>
<td id="p1d2" tabindex=2></td>
<td id="p1d3" tabindex=3></td>
<td id="p1d4" tabindex=4></td>
<td id="p1d5" tabindex=5></td>
<td id="p1d6" tabindex=6></td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>
I want to save every block with id on localstorage. I know I can use localStorage.setItem("p1d1", $('#p1d1').text()); to save these, but is there a better way to save all of these blocks without going like
localStorage.setItem("p1d1", $('#p1d1').text());
localStorage.setItem("p2d1", $('#p2d1').text());
localStorage.setItem("p3d1", $('#p3d1').text());
through the whole thing? I need to call each of them by their id later on.
Thank you.

You can use document.querySelectorAll('td[id^=p]') to select all the td that has id that startsWith p.
const tds = Array.from(document.querySelectorAll('td[id^=p]'));
tds.forEach(td => {
const id = td.id;
const text = td.innerText;
console.log(id, text);
})
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1>text of p1d1</td>
<td id="p1d2" tabindex=2>text of p1d2</td>
<td id="p1d3" tabindex=3>text of p1d3</td>
<td id="p1d4" tabindex=4>text of p1d4</td>
<td id="p1d5" tabindex=5>text of p1d5</td>
<td id="p1d6" tabindex=6>text of p1d6</td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>

Personally I would store it in one key instead of tons of keys. Simple reduce statement can let you gather all of the data.
var cells = document.querySelectorAll('td[id^="p"]')
function save() {
const data = Array.from(cells).reduce(function (o, td) {
o[td.id] = td.innerHTML;
return o
}, {})
console.log(data)
//window.localStorage("data", JSON.stringify(data))
}
function loadData () {
var data = window.localStorage("data")
if (data) {
var obj = JSON.parse(data)
Object.entries(obj).forEach( function (entry) {
document.getElementById(entry[0]).innerHTML = entry[1]
})
}
}
save()
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1></td>
<td id="p1d2" tabindex=2></td>
<td id="p1d3" tabindex=3></td>
<td id="p1d4" tabindex=4></td>
<td id="p1d5" tabindex=5></td>
<td id="p1d6" tabindex=6></td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>

I would recommend adding a class to each cell:
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1 class="periodCell"></td>
<td id="p1d2" tabindex=2 class="periodCell"></td>
<td id="p1d3" tabindex=3 class="periodCell"></td>
<td id="p1d4" tabindex=4 class="periodCell"></td>
<td id="p1d5" tabindex=5 class="periodCell"></td>
<td id="p1d6" tabindex=6 class="periodCell"></td>
</tr>
Then doing something along the lines of the following:
$('.periodCell').each(function(index, elem)
{
localStorage.setItem(elem.id, elem.textContent);
});
you could do some other things with the selector so that you're not needing to add the class to every cell, but this is the most basic option...
another is regex on the cell ids... but that would be pretty painful

Eliminate column from table using javascript

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>

add sum of the a table with multiple header

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.