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

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.

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?

Getting information on a JS constructed button on click

Is it possible to get information, such as the id, value, of a button created by a javascript loop? For example, the following code, which creates a button for each line in a table formed by an array of objects?
var table = document.createElement("TABLE");
table.setAttribute("id", "tableOfArray");
var array = [ (a large array of objects here) ];
for (var i = 0; i < array.length; i++)
{
row = table.insertRow(i);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);
cell4 = row.insertCell(3);
cell5 = row.insertCell(4);
cell6 = row.insertCell(5);
cell1.innerHTML = i + 1; //for numbering the table
cell2.innerHTML = array[i].property1;
cell3.innerHTML = array[i].property2;
cell4.innerHTML = array[i].property3;
cell5.innerHTML = array[i].property4;
var button = document.createElement("BUTTON");
var buttonText = document.createTextNode("Remove Line");
button.appendChild(buttonText);
button.setAttribute("id", String(i));
button.setAttribute("value", String(i));
button.setAttribute("onClick", "remove()");
cell6.appendChild(button);
}
function remove()
{
?? //gets the value of the button that was pressed
var buttonValue = ??; //assigns the value of button to the variable
arrayTable = document.getElementById("tableOfArray");
table.deleteRow(buttonValue);
}
Is there a method that can be used to get the id or value of the button in order to perform the remove action?

you can pass the current context by passing this
button.setAttribute("onClick", "remove(this.id)");
function remove(id){
var _id=id;// id of the button;
}
Else you can use the event object
function remove(event){
var _target = event.target;
var _getId = _target.id;
var _getParentTD = _target.parentElement; // will give the td which contain button
var _getParentTR = _target.parentElement.parentElement; // will return tr
}

Correct the serial numbers of the row after deletion using Javascript only

I have two functions for adding and deleting rows in a table using Javascript:
function addRow() {
//document.getElementById("div_dea").style.display = "none";
document.getElementById("div_orderlist").style.display = "block";
var table = document.getElementById("ordertable");
var rowcount = document.getElementById("ordertable").rows.length;
var row = table.insertRow(rowcount);
row.id="row_"+rowcount;
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
var sel = document.getElementById("select_product_name");
var optiontext = sel.options[sel.selectedIndex].text;
cell1.innerHTML = rowcount;
cell2.innerHTML = optiontext;
cell3.innerHTML = "abc";
}
Delete Row as follows:
function deleteRow(){
var table = document.getElementById("ordertable");
var rowcount = document.getElementById("ordertable").rows.length;
alert("first"+rowcount);
for(var i=1;i<rowcount;i++){
row = table.rows[i];
if(document.getElementById(row.id).style.backgroundColor =="red"){
table.deleteRow(row.rowIndex);
}
}
alert("second"+rowcount);
}
While addRow() I am adding serial numbers as: cell1.innerHTML = rowcount;
I need correct the serial numbers after deletion:
The rows get deleted But alert("second"+rowcount); not even working in deletion. How can correct the serial numbers of row after deletion.
Note: Use JavaScript only

Use this code
function updateRowCount(){
var table = document.getElementById("ordertable");
var rowcountAfterDelete = document.getElementById("ordertable").rows.length;
for(var i=1;i<rowcountAfterDelete;i++){
table.rows[i].cells[0].innerHTML=i;
}}

.className() seem doesnt Work

I Have a table with rows added dynamically. These rows contain a date picker and dropdown, I am able to set classname on the but not on the datepicker and dropdown using .className()
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.className = "row1 part";
var cell1 = row.insertCell(0);
cell1.className = "value";
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox[]";
element1.className = "date-pick"; // this fails
element1.setAttribute('value', '2013/10/04');
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
element2.name = "prddrop[]";
element2.id = "prddrop[]";
element2.className = "bankopt"; //this also fails
element2.options[element2.length] = new Option("[-- Please Choose --]", "[-- Please Choose --]");
var arr_items = [{
"IssuingBank": " --- "
}, {
"IssuingBank": " --- "
}];
$(document).ready(function () {
for (var i = 0; i < arr_items.length; i++) {
element2.options[element2.length] = new Option(arr_items[i].IssuingBank, arr_items[i].IssuingBank);
}
});
cell2.appendChild(element2);
Please help me with this... Thanks!

Remember that .appendChild() returns the element.
So you could do:
cell1.appendChild(element1).className = "class_to_add";
Another way:
You can use setAttribute (NOTE: This will not work on IE8 and earlier versions as stated by #om in the comments.)
var i = document.createElement('input');
i.setAttribute('class', 'myclass');
document.forms[0].appendChild(i);

This should work for you. Across all browsers.
var yourClass = document.createAttribute("class");
yourClass.value = "date-pick";
element1.setAttributeNode(yourClass);

JQuery dynamic table totals

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.

Categories

Resources