JQuery dynamic table totals - javascript

I have this table:
The table has data from every month, but only shows the selected date.
So, the question is: How can I do a total of Actual Hours and Extra Hours per month (visible data)?
This is how I build the table:
var total = 0 ;
var actualTotal = 0 ;
var totalEH = 0;
var table=document.getElementById("fbody");
for (var i=0;i<user.length;i++)
{
var row=table.insertRow(-1);
var cellDate = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var cell3 = row.insertCell(-1);
var cell4 = row.insertCell(-1);
var cell5 = row.insertCell(-1);
var cell7 = row.insertCell(-1);
var cell8 = row.insertCell(-1);
var startAM = user[i].reg_start_worktime_am;
var finishAM = user[i].reg_finish_worktime_am;
var startPM = user[i].reg_start_worktime_pm;
var finishPM = user[i].reg_finish_worktime_pm;
cellDate.innerHTML = user[i].reg_date;
cell2.innerHTML = user[i].reg_start_worktime_am;
cell3.innerHTML = user[i].reg_finish_worktime_am;
cell4.innerHTML = user[i].reg_start_worktime_pm;
cell5.innerHTML = user[i].reg_finish_worktime_pm;
cell7.innerHTML = calcTimeDifference(startAM.substring(0,2), startAM.substring(3,5), finishAM.substring(0,2), finishAM.substring(3,5), startPM.substring(0,2), startPM.substring(3,5), finishPM.substring(0,2), finishPM.substring(3,5));
cell8.innerHTML = (calcTimeDifference(startAM.substring(0,2), startAM.substring(3,5), finishAM.substring(0,2), finishAM.substring(3,5), startPM.substring(0,2), startPM.substring(3,5), finishPM.substring(0,2), finishPM.substring(3,5))-user[i].worktime_fullhours).toFixed(2);
if (cell8.innerHTML != "NaN")
{
totalEH += parseFloat((calcTimeDifference(startAM.substring(0,2), startAM.substring(3,5), finishAM.substring(0,2), finishAM.substring(3,5), startPM.substring(0,2), startPM.substring(3,5), finishPM.substring(0,2), finishPM.substring(3,5))-user[i].worktime_fullhours).toFixed(2));
total = (document.getElementById('box-table-a').rows.length-1)*user[0].worktime_fullhours;
actualTotal += parseFloat(calcTimeDifference(startAM.substring(0,2), startAM.substring(3,5), finishAM.substring(0,2), finishAM.substring(3,5), startPM.substring(0,2), startPM.substring(3,5), finishPM.substring(0,2), finishPM.substring(3,5)));
}
}
Thanks
EDIT:
Fixed:
var totalActuals = 0,
totalExtras = 0;
var totalHours = 0;
var trs = $("#fbody tr").each(function(e) {
if($(this).css('display')!='none')
if( $("td:eq(6)", this).text() != 'NaN' ) {
// alert("Horro! "+$("td:eq(6)", this).text() );
totalActuals += parseFloat( $("td:eq(5)", this).text() );
totalExtras += parseFloat($("td:eq(6)", this).text());
totalHours++;
}
});
totalHours = totalHours*8;

If I understand you correctly, your table will have some rows that are visible, and some will be hidden. And, you want to calculate the totals for rows that are visible.
You can do this by looping through only the visible rows and accessing the columns required for calculating the totals.
var totalActuals = 0;
var totalExtras = 0;
$.each($('table tr:visible',function() {
totalActuals += $(this).find(".actualHours").val();
totalExtras += $(this).find(".totalExtras").val();
};)
But this will also return the header row. So I think you should assign a class to the rows of the table, and use the class in the jquery selector - $('table .tableRow:visible')
Edit
Here I had assumed that you have given the class "actualHours", "totalExtras" to the div's in which the actual hours and total extra hours are shown in each row of the table. If you haven't done so, you can use -
totalActuals += $(this).find("td").eq(5).text();
totalActuals += $(this).find("td").eq(6).text();
This will select the 5th and 6th columns of the row.

Related

Dynamically checking height of table inside for loop as rows are added

I have the below snippet of code, some variables have been excluded for privacy:
var curr_table = 1;
var table = document.getElementById("open_tickets_" + curr_table + "").getElementsByTagName('tbody')[0];
if (Number(allResults.length) > 0) {
for (var i = 0; i < Number(allResults.length); i++) {
var currentTime = allResults[i].Created;
if (!arrayOfTimes.includes(currentTime)) {
if(document.getElementById("open_tickets_" + curr_table + "").offsetHeight >= 1000){
curr_table++;
console.log(curr_table);
$("nav-openTickets").append("<table class=\"table table-striped\" id=\"open_tickets_" + curr_table + "\"><thead class=\"thead-light\"><tr><th style=\"width:200px;\">Date</th><th>XX</th><th>XXX</th><th style=\"width:200px;\">XXX</th><th>XXX</th><th style=\"width:100px;\">XXX</th><th>XXX</th></tr></thead><tbody></tbody></table>");
}
var row = table.insertRow(0);
var date_cell = row.insertCell(0);
date_cell.innerHTML = dateOpened;
var xx_cell = row.insertCell(1);
xx_cell.innerHTML = XX;
var xx_cell = row.insertCell(2);
xx_cell.innerHTML = XX;
var xx_cell = row.insertCell(3);
xx_cell.innerHTML = XX;
var xx_cell = row.insertCell(4);
xx_cell.innerHTML = XX;
var xx_cell = row.insertCell(5);
xx_cell.innerHTML = XX;
var xx_cell = row.insertCell(6);
xx_cell.innerHTML = XX;
var xx_cell = row.insertCell(7);
xx_cell.innerHTML = XX;
arrayOfTimes.push(currentTime);
}
}
}
I'm trying to check the tables height as the rows are added inside of this for loop (variables and data are pulled from a database). The code adds rows to the table, but it doesn't execute the if statement that checks the tables height to create a new table for rows to be added to. The offsetHeight always returns 0.
I need to split the tables into different tables when they exceed a certain height - How can I do this?

How can I put another text in a cell by using JavaScript?

I would like to put the array price in the same cell of the array antipasti. I've tried too but I substituted the text. I would like to have all of two arrays in the same cell.
I didn't know how to do that. Can someone pls tell me how? Thank you so much
Here is the image: https://i.stack.imgur.com/qwOkj.png
function generateTableAntipasti() {
//Build an array containing Customer records.
var antipasti = new Array();
antipasti.push(["Antipasti"]);
antipasti.push(["Patatine"]);
antipasti.push(["Kellogs"]);
antipasti.push(["Ciao"]);
antipasti.push(["Hello"]);
antipasti.push(["Bye"]);
var price = new Array();
price.push(["5,00$"]);
price.push(["5,00$"]);
price.push(["5,00$"]);
price.push(["5,00$"]);
price.push(["5,00$"]);
price.push(["5,00$"]);
//Create a HTML Table element.
var table = document.createElement("Table");
table.border = "1";
table.className = "Antipasti";
table.cellSpacing = 20;
//Add the data rows.
for (var i = 0; i < antipasti.length; i++) {
row = table.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerHTML = antipasti[i];
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
All the above points put together and shortened a little bit ...
function generateTableAntipasti() {
//Build an array containing Customer records.
var antipasti = ["Antipasti","Patatine","Kellogs","Ciao","Hello","Bye"],
price = ["5,00$","5,00$","5,00$","5,00$","5,00$","5,00$"];
//Create a HTML Table element.
var table = document.createElement("Table");
table.border = "1";
table.className = "Antipasti";
table.cellSpacing = 8;
//Add the data rows.
antipasti.forEach((a,i)=>table.insertRow(-1).insertCell(-1).innerHTML = a +'<br>'+price[i]);
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
generateTableAntipasti()
<div id="dvTable"></div>

Reorder table using js when add more row in the table

I create a table from a JS to add more row
function addItem(code,name) {
var tblList = document.getElementById("list_inventory");
var tblBody = tblList.tBodies[0];
var lastRow = tblBody.rows.length;
var row = tblBody.insertRow(lastRow);
var newCell = row.insertCell(0);
newCell.innerHTML = lastRow+1;
var newCell = row.insertCell(1);
newCell.innerHTML = name+"<input type='hidden' name='code[]' id='code[]' value='"+code+"' />";
}
But the problem is I need to make a table ascending by 'name' whenever I create more row? Is it possible?
Of course it's possible. After you inserted:
var rows = tblBody.rows;
rows.sort(function(a,b) {
var first = a.cells[0].children[0].name;
var second = b.cells[0].children[0].name;
return (first.name < second.name) ? 1 : ((first.name > second.name) ? -1 : 0);
});
tblBody.rows.innerHTML = rows;
So the idea is to pick the rows and then sort it by input name prop. Hope it'll help you.

adding row to an existing table in javascript

guys i jnow it is dummy question but i spent hours in this and cant reach .. i want to add row to an existing table and this row consists of checkbox and 4 textboxes .. when i run it the textboxes appears but the checkbox dont .. here is my code
function addRow() {
var i = 1;
var table = document.getElementById("table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var html = [];
html.push("<table id='table'>\n<body>");
html.push("<tr><td><input type='checkbox' name='chk'/></td>");
var cell = row.insertCell(html);
for ( var propertyNames in grid.data[0]) {
cell = row.insertCell(i);
var element = document.createElement("input");
element.type = "text";
element.size = 10;
element.name = "input"+i;
cell.appendChild(element);
html.push("<td>" + cell + "</td>");
i++;
}
html.push("</tr>");
html.push("</body>\n</table>");
}
The problem is you are creating a array with the markup for the checkbox, but it is never added to the table
function addRow() {
var i = 1;
var table = document.getElementById("table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell();
var element = document.createElement("input");
element.type = "checkbox";
element.name = "chk";
cell.appendChild(element);
for (var propertyNames in grid.data[0]) {
cell = row.insertCell(i);
element = document.createElement("input");
element.type = "text";
element.size = 10;
element.name = "input" + i;
cell.appendChild(element);
i++;
}
}
var grid = {
data: [{
x: 1,
y: 1
}]
};
addRow();
<table id="table"></table>

Javascript: Insert new rows into table by checking row top position

I want to insert two new rows when a row's top position exceeds a limit in pixel.
I've tried following code but its not working properly.
I'm adding these two rows for page break and repeating table header purpose.
Following is the print preview of this code ran:
The header should repeat at next page only.
var x = document.getElementsByTagName('tr');
var rowTopVal = 0;
var tIndex = 0;
var deductVal = 0;
var tableId = document.getElementById("testID");
for (var i = 0; i < x.length; i++) {
rowTopVal = x[i].position().top;
rowTopVal = rowTopVal - deductVal;
if (1200 < rowTopVal) {
tIndex = i;
var row = tableId.insertRow(tIndex);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "x";
cell2.innerHTML = "Y";
cell3.innerHTML = "z";
cell4.innerHTML = "P";
cell5.innerHTML = "q";
row.className = 'tableHeaderRepeat';
var row2 = tableId.insertRow(tIndex);
row2.className = 'tableHeaderRepeatBlank';
newRow1Height = parseInt($('.tableHeaderRepeatBlank').css('height'), 10);
newRow2Height = parseInt($('.tableHeaderRepeat').css('height'), 10);
deductVal = deductVal + rowTopVal - newRow1Height - newRow2Height;
}
}
Maybe you could try adding css property to your table headers? See CSS page break properties.
Example:
.tableHeaderRepeat { page-break-before: always; }
It should add a page break before every table header, so you only need to approximately calculate the position to start a new table. I'm not able to test this right now, but maybe it'll help.

Categories

Resources