Develop Reference

Dynamically creating a table

I'm trying to create a table dynamically using JavaScript. So far i'm trying to understand what am i doing wrong. At first i'm making a table element and then i set id for that element. After that i'm looping through rows and as i do that, i create new columns in each new row. The problem which i'm having is that it stops making only 1st row. Can someone point out mistake im making?
var x = document.createElement("TABLE");
x.setAttribute("id", "newTable");
document.body.appendChild(x);
for (i=1;i<5;i++){
var y = document.createElement("TR");
y.setAttribute("id", "newTr");
document.getElementById("newTable").appendChild(y);
for (j=1;i<10;i++){
var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("newTr").appendChild(z);
}
}

var x = document.createElement("TABLE");
x.setAttribute("id", "newTable");
document.body.appendChild(x);
for (i=1;i<5;i++){
var y = document.createElement("TR");
y.setAttribute("id", "newTr"+i);
document.getElementById("newTable").appendChild(y);
for (j=1;j<10;j++){
var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("newTr" +i).appendChild(z);
}
}
i changed your second for-loop from i to j and i made the td-element id unique.

I think you will find that you mixed up jand i
for (j=1;i<10;i++){
var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("newTr").appendChild(z);
}
try
for (i=1;i<10;i++){ //j here changed to i;
var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("newTr").appendChild(z);
}

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.

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.

Create html table from comma separated strings javascript

I am trying to write a Javascript function which writes the text to (eventually) create the following html tables (I will be passing different length arguments to it to create hundreds of tables):
<table>
<tr><td><u>School</u></td>
<td><u>Percent</u></td>
<tr><td>School 1: </td>
<td>Percent1</td></tr>
<tr><td>School 2: </td>
<td>Percent2</td></tr>
<tr><td>School 3: </td>
<td>Percent3</td></tr>
</table>
The inputs that I have are comma separated strings:
var school_list = "School 1, School 2, School 3"
var pct_list = "Percent1, Percent2, Percent3"
The function needs to be passed school_list and pct_list, and return a string of the html table code above.

Something like this:
var schoolArr = school_list.split(',');
var pctArr = pct_list.split(',');
var table = "<table>";
for (var i=0; i< schoolArr.length; i++) {
table = table + "<tr><td>"+ schoolArr[i]+"</td><td>"+ pctArr[i] +"</td></tr>";
}
table = table + "</table>";
return table;

You can try below code with Jsfiddle demo ::
function createTable(tab) {
var tar = document.getElementById(tab);
var table = document.createElement('TABLE');
table.border = '1';
var tbdy = document.createElement('TBODY');
table.appendChild(tbdy);
for (var j = 0; j < 4; j++) {
var tr = document.createElement('TR');
tbdy.appendChild(tr);
for (var k = 0; k < 2; k++) {
var td = document.createElement('TD');
td.width = '100';
if (k == 0) td.innerHTML = "School" + (j + 1);
else td.innerHTML = "Percent" + (j + 1);
tr.appendChild(td);
}
}
tar.appendChild(table);
}
createTable('tab');
<div id="tab"></div>

var schools = school_list.split(/,\s*/g).join('</td><td>');
var pcts = pct_list.split(/,\s*/g).join('</td><td>');
return '<table><tr><td>' + schools + '</td></tr><tr><td>' + pcts + '</td></tr></table>'
or a better approach is to construct the whole table in DOM and place it in document directly.
function appendTD(tr, content) {
var td = document.createElement('td');
td.appendChild(document.createTextNode(content));
tr.appendChild(td);
}
var table = document.createElement('table');
school_list.split(/,\s*/g).forEach(appendTD.bind(null, table.appendChild(document.createElement('tr'))));
pct_list.split(/,\s*/g).forEach(appendTD.bind(null, table.appendChild(document.createElement('tr'))));
someParent.appendChild(table);

var numberOfSchools = school_list.split(',');
var numberOfPercent = pct_list.split(',');
var htmlOutput= '<table><tr><td><u>School</u></td><td><u>Percent</u></td>';
for(var i = 0 ; i < numberOfSchools.length; i++)
{
htmlOutput += "<tr><td>" + numberOfSchools[i] + "</td>";
htmlOutput += "<td>"+numberOfPercent[i] +"</td></tr>"
}
htmlOutput += "</table>"
And return htmlOutput

Here's a DOM method, highlighs why innerHTML is so popular. DOM methods are pretty fast in execution lately, but the amount of code is a bit tiresome unless there's a good reason to use it.
The amount of code can be significantly reduced with a couple of helper functions so it is on par with innerHTML methods:
var school_list = "School 1, School 2, School 3"
var pct_list = "Percent1, Percent2, Percent3"
function makeTable(schools, percents) {
// Turn input strings into arrays
var s = schools.split(',');
var p = percents.split(',');
// Setup DOM elements
var table = document.createElement('table');
var tbody = table.appendChild(document.createElement('tbody'));
var oRow = document.createElement('tr');
var row;
oRow.appendChild(document.createElement('td'));
oRow.appendChild(document.createElement('td'));
table.appendChild(tbody);
// Write header
row = tbody.appendChild(oRow.cloneNode(true));
row.childNodes[0].appendChild(document.createTextNode('School'));
row.childNodes[1].appendChild(document.createTextNode('Percent'));
// Write rest of table
for (var i=0, iLen=s.length; i<iLen; i++) {
row = tbody.appendChild(oRow.cloneNode(true));
row.childNodes[0].appendChild(document.createTextNode(s[i]));
row.childNodes[1].appendChild(document.createTextNode(p[i]));
}
document.body.appendChild(table);
}
It can be called after the load event, or just placed somewhere suitable in the document:
window.onload = function() {
makeTable(school_list, pct_list);
}

Why tables's td node.appendChild doesn't work?

I have this JavaScript function to create a table with image cells:
function Draw(array) {
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
document.clear();
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
tbl.setAttribute("borderstyle", "1");
var tblBody = document.createElement("tbody");
// creating all cells
for (var j = 0; j < 4; j++) {
// creates a table row
var row = document.createElement("tr");
for (var i = 0; i < 4; i++) {
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
var cell = document.createElement("td");
var cellText = document.createElement(array[4 * j + i]);
cell.appendChild(cellText);
row.appendChild(cell);
}
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
}
but in
var cellText = document.createElement(array[4 * j + i]);
cell.appendChild(cellText);
row.appendChild(cell);
the cell.appendChild(cellText); doesn't work!
I don't know why and I don't know how to resolve it!
update
the a array is this:
var a = Array(16);
for (var i = 0; i < 16; i++) {
a[i] = '<img src="' + i + '.jpg" />';
}

Updated answer
Re your comment:
It just put a text. it means I see the text of <img src ... not the image!
It would have been useful if you'd told us that array[4 * j + i] contained markup (included an example of it in the question, for instance).
If the array contains markup, you don't want to create a new node of any kind. Instead, assign to innerHTML of the table cell:
cell.innerHTML = array[4 * j + i];
row.appendChild(cell);
When you assign to innerHTML, the browser parses the markup and adds the relevant content to the element.
Original answer before the comment below and before array's content was given:
To create a text node, you use createTextNode, not createElement. So:
// Change here ---------v
var cellText = document.createTextNode(array[4 * j + i]);
cell.appendChild(cellText);
row.appendChild(cell);
Suppose array[4 * j + i] was "Hi there". Your document.createElement(array[4 * j + i]) call was asking the DOM to create an element with the tag name Hi there, exactly the way that document.createElement('div') asks it to create an element with the tag name div.

For the sake of completeness, here's some other alternatives to the accepted solution, if you'd prefer to use appendChild() instead of innerHTML property.
You could've also done
var a = Array(16);
for (var i = 0; i < 16; i++) {
a[i] = document.createElement('img');
a[i].setAttribute('src', i + '.jpg');
}
and it would've worked too. Also, you could've created an Image object:
var a = Array(16);
for (var i = 0; i < 16; i++) {
a[i] = new Image();
a[i].src = i + '.jpg';
}
and appendChild should've still worked.
Another usable, but completely different approach would've been to use a javascript framework, such as jQuery, and its functionalities. That would require rewriting the code you have however.