Grab values from row if cell[X] has written input

Grab values from row if cell[X] has written input - javascript

Hello everyone right now I'm trying to retrieve informatmion inside a table, I currently have this example in order to retrieve all the row values if value="!= null", but if I remove the attribute value="" in my inputs I can't grab the information I type inside the inputs
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value="123"></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>
<button onclick="aplicar()">Aplicar</button>
<script>
</script>
<script>
function aplicar(){
var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = [];
Array.from(myTab).forEach(input => {
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
});
console.log(tableData);
}
</script>
This will input the first row data because it has 123 value inside, but I need to remove the value attribute and get the data I type inside the input.
I will post this information using AJAX at the end.

You can set the value attribute on input event:
function setValueAttr(el){
el.setAttribute('value', el.value)
}
function aplicar(){
var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = [];
Array.from(myTab).forEach(input => {
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
});
console.log(tableData);
}
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value="123"></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value=""></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value=""></td>
</tr>
</tbody>
</table>
<button type="button" onclick="aplicar()">Aplicar</button>
OR: You can directly check the value of the element with if condition
function aplicar(){
var myTab = document.querySelectorAll('.txtID');
var tableData = [];
Array.from(myTab).forEach(input => {
if(input.value.trim() != ""){
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
}
});
console.log(tableData);
}
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value="123"></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>
<button type="button" onclick="aplicar()">Aplicar</button>

Related

Javascript read table and if value != null get rows data

How can I read a table using Javascript and lookup on each Row from the table if the value of [X] cell in the row is != null, save that row data.
Currently I've just found how to read the whole table using this script
<div class="container-fluid">
<div class="card shadow mb-4">
<div class="card-header py-3">
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value=""></td>
</tr>
</tbody>
</table>
<script>
var myTab = document.getElementById('tableID');
var tableData = [];
// LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
for (i = 1; i < myTab.rows.length; i++) {
if(){
}else{
}
}
</script>
Can I get help to complete the syntax of the script or can I get some direction on how to solve this
In this table example, the output or the rows that shall be grabbed would be the first 2 tr's since they are != null

First of all the attribute id must be unique in document, use class instead.
You can use querySelectorAll() to target the inputs whose value is not null using attribute selector. Then use map() like the following way:
var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = Array.from(myTab).map(input => input.value);
console.log(tableData);
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>
UPDATE: You can get all the cell value in the form of objects like the following way:
var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = [];
Array.from(myTab).forEach(input => {
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
});
console.log(tableData);
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>

Use cells to get the cells of the row, and then get the value of the input in cells[4]. If it's not an empty string, save it to the array.
var myTab = document.getElementById('tableID');
var tableData = [];
// LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
for (var i = 1; i < myTab.rows.length; i++) {
var val = myTab.rows[i].cells[4].firstElementChild.value;
if (val != '') {
tableData.push(val);
}
}
console.log(tableData);
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value=""></td>
</tr>
</tbody>
</table>

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>

How to pass check box value to php ? (javascript)

I have table and with check box(able to checkall), how do i pass the value from check box to another page? should i write javascript function or using PHP for better solution. For example , when checkbox is checked pass checkbox value , if not checked pass 0
This is my table:
<table border="1">
<thead>
<tr>
<th><input type="checkbox" id="chkAll" onclick="allChecked(this.checked);"/></th>
<th>Invoice No.</th>
<th>Invoice Date</th>
<th>Due Date</th>
<th>Invoice Amount</th>
<th>Open Amount</th>
</tr>
</thead>
<form id="frmPaySelected">
<tbody>
<tr>
<td><input type="checkbox" name="invoice_no[]" value="IN000001" onclick="addTotal(this.checked, 1500.00);"/></td>
<td>IN000001</td>
<td align="right">11 Jan, 2018</td>
<td align="right">10 Feb, 2018</td>
<td align="right">1,500.00</td>
<td align="right">1,500.00</td>
</tr>
<tr>
<td><input type="checkbox" name="invoice_no[]" value="IN000003" onclick="addTotal(this.checked, 1500.00);"/></td>
<td>IN000003</td>
<td align="right">16 Jan, 2018</td>
<td align="right">15 Feb, 2018</td>
<td align="right">2,150.00</td>
<td align="right">1,500.00</td>
</tr>
<tr>
<td><input type="checkbox" name="invoice_no[]" value="IN000004" onclick="addTotal(this.checked, 259.50);"/></td>
<td>IN000004</td>
<td align="right">30 Jan, 2018</td>
<td align="right">31 Mar, 2018</td>
<td align="right">900.00</td>
<td align="right">259.50</td>
</tr>
<tr>
<td colspan="4" align="right"><strong>Total: </strong></td>
<td><div style="text-align:right; font-weight:bold;">5,538.25</div></td>
<td><div id="divTotalPayAmount" style="text-align:right; font-weight:bold;">0.00</div></td>
</tr>
<tr>
<td colspan="6" align="right"><input type="button" value="Pay Selected" onclick="alert('Submit Selected!');"/></td>
</tr>
</tbody>
</form>
</table>
"javascript checkbox function"
<script language="JavaScript">
var totalOpenAmount = 0;
var blnUpdateCheckAll = true;
function allChecked(checkValue) {
var chkInvoices = document.getElementsByName('invoice_no[]');
blnUpdateCheckAll = false;
for(i = 0; i < chkInvoices.length; i++) {
if(chkInvoices[i].checked != checkValue)
chkInvoices[i].click();
}
blnUpdateCheckAll = true;
}
function updateAllChecked() {
var chkInvoices = document.getElementsByName('invoice_no[]');
var c = 0;
for(i = 0; i < chkInvoices.length; i++) {
if(chkInvoices[i].checked)
c++;
}
if(c < i)
document.getElementById('chkAll').checked = false;
else
document.getElementById('chkAll').checked = true;
}
function addTotal(checkValue, openAmount) {
if(checkValue)
totalOpenAmount += openAmount;
else
totalOpenAmount -= openAmount;
if(blnUpdateCheckAll) updateAllChecked();
document.getElementById('divTotalPayAmount').innerHTML = totalOpenAmount.toFixed(2).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
}
</script>

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.

Develop Reference

JavaScript is the programming language of the Web.

Grab values from row if cell[X] has written input - javascript

Related

Javascript read table and if value != null get rows data

localstorage setitem for every block in <table>

Eliminate column from table using javascript

How to pass check box value to php ? (javascript)

add sum of the a table with multiple header

Categories

Resources