read csv-data and put it in an array

Perlchamp

you were too fast !!
to your information:
table needs a header (thead, tr, th) and a footer (tfoot, tr, td), and, of
course a boda (tbody, tr, td), my cose, where a put html-tags in the table and text without variable works fine.
but later, if i should dissapointed, i will try this.

sdetweil

@Perlchamp >where a put html-tags in the table

its exactly the same as writing the html

they don’t NEED a thead/tfoot, these are optional

you could create a big text string of the html < table>… < /table>
and then assign that text string to the wrapper div innerHTML.

same result…

sdetweil

@sdetweil when I had a big pile of html objects to create I wrote a little routine to hide the 4 lines per object

createEl(type, id, class, parent){
   var el = document.createElement(type)
   el.id=id
   if(class) 
     el.classname=class
   parent.addChild(el)
   return el
},

then to use

    var table= this.createEl('table', "birthday-tbody", null , wrapper)
            etc
            etc

Perlchamp

in the moment you’re too fast for me …
this code is from the test-module:

    getDom: function() {
	var wrapper = document.createElement("div");


	if ((moment() > this.midnight) || (!this.loaded)) {
	    var month = moment().month();
	    var year = moment().year();
	    var monthName = moment().format("MMMM");
	    var monthLength = moment().daysInMonth();

	    // tabelle erstellen
	    var wrapper = document.createElement("table");
	    wrapper.className = 'table';
	    wrapper.id = 'birthday-table';

	    // tabellenkopf erstellen
	    var tHeader = document.createElement("thead");
	    tHeader.className = "thead";
	    tHeader.id = "birthday-thead";

	    var headerTR = document.createElement("tr");
	    headerTR.className = "tr-head";
	    headerTR.id = "birthday-tr-head";			    

	    var headerTH = document.createElement("th");
	    headerTH.colSpan = "2";
	    headerTH.scope = "col";
	    headerTH.className = "th-head";
	    headerTH.id = "birthday-th-head";
	    headerTH.innerHTML = this.translate(this.config.title);
	    headerTR.appendChild(headerTH);
	    			
	    tHeader.appendChild(headerTR);
	    wrapper.appendChild(tHeader);
		    
	    // Create TFOOT section -- currently used for debugging only
	    var tFooter = document.createElement('tfoot');
	    tFooter.className = "tfoot";
	    tFooter.id = "birthday-tfoot";

	    var footerTR = document.createElement("tr");
	    footerTR.className = "tr-foot";
	    footerTR.id = "birthday-tr-foot";

	    var footerTD = document.createElement("td");
	    footerTD.colSpan ="2";
	    footerTD.className = "td-foot";
	    footerTD.id = "birthday-td-foot";
	    if (this.config.debugging) {
		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
	    }
	    else {
		footerTD.innerHTML = "";
	    }

	    footerTR.appendChild(footerTD);
	    tFooter.appendChild(footerTR);
	    wrapper.appendChild(tFooter);
			
	    // Create TBODY section with day names
	    var eintraege = 3;
	    for (var i=1; i<=eintraege; i++) {
		var tBody = document.createElement("tBody");
		tBody.className = "tbody";
		tBody.id = "birthday-tbody";

		var bodyTR = document.createElement("tr");
		bodyTR.className = "tr-body";
		bodyTR.id = "birthday-tr-body";

		var bodyTDimage = document.createElement("td");
		bodyTDimage.className = "td-image";
		bodyTDimage.id = "birthday-td-image";
		bodyTDimage.innerHTML = "23";

		var bodyTD = document.createElement("td");
		bodyTD.className = "td-body";
		bodyTD.id = "birthday-td-body";
		bodyTD.innerHTML = "Bettina Zimmermann&nbsp;&nbsp;<span class=\"age-span\">46</span></br>Frank Dubiel&nbsp;&nbsp;<span class=\"age-span\">54</span></br>Jürgen Gruse&nbsp;&nbsp;<span class=\"age-span\">52</span>";

/*
		var bodyAgeSpan = document.createElement("span");
		bodyAgeSpan.className = "age-span";
		bodyAgeSpan.id = "birthday-age-span";
		bodyAgeSpan.innerHTML = "&nbsp;&nbsp;46";
		bodyTD.appendChild(bodyAgeSpan);
*/		

		bodyTR.appendChild(bodyTDimage);
		bodyTR.appendChild(bodyTD);
		tBody.appendChild(bodyTR);
		wrapper.appendChild(tBody);
	    }
	
	    this.loaded = true;
	    return wrapper;
	}
		
    },

and looks like :

sdetweil

@Perlchamp ok, so you WANT a title, header and footer…

still no different than an actual table in all html
by using document.creatElement and appendChild() there are no close tags to create

a td is a closed thing you add text to a td…

with my little helper routine, you write exactly what you would have written in html
and can indent/outdent to match for readability

sdetweil

@Perlchamp maybe a nunjuks template , but its the same work to create the template the generate the content
the template has to have all the same stuff you are doing, including the loop part

Perlchamp

This post is deleted!

sdetweil

@Perlchamp said in read csv-data and put it in an array:

sorry sam, but my code is displayed wrong ! what in hell …
the tbody section:

any < must have a space after it to display on the forum… no way to escape them yet…
no real work from site admin on problem

Perlchamp

    // Override dom generator.
    getDom: function() {
	var wrapper = document.createElement("div");


	if ((moment() > this.midnight) || (!this.loaded)) {
	    var month = moment().month();
	    var year = moment().year();
	    var monthName = moment().format("MMMM");
	    var monthLength = moment().daysInMonth();

	    // tabelle erstellen
	    var wrapper = document.createElement("table");
	    wrapper.className = 'table';
	    wrapper.id = 'birthday-table';

	    // tabellenkopf erstellen
	    var tHeader = document.createElement("thead");
	    tHeader.className = "thead";
	    tHeader.id = "birthday-thead";

	    var headerTR = document.createElement("tr");
	    headerTR.className = "tr-head";
	    headerTR.id = "birthday-tr-head";			    

	    var headerTH = document.createElement("th");
	    headerTH.colSpan = "2";
	    headerTH.scope = "col";
	    headerTH.className = "th-head";
	    headerTH.id = "birthday-th-head";
	    headerTH.innerHTML = this.translate(this.config.title);
	    headerTR.appendChild(headerTH);
	    			
	    tHeader.appendChild(headerTR);
	    wrapper.appendChild(tHeader);
		    
	    // Create TFOOT section -- currently used for debugging only
	    var tFooter = document.createElement('tfoot');
	    tFooter.className = "tfoot";
	    tFooter.id = "birthday-tfoot";

	    var footerTR = document.createElement("tr");
	    footerTR.className = "tr-foot";
	    footerTR.id = "birthday-tr-foot";

	    var footerTD = document.createElement("td");
	    footerTD.colSpan ="2";
	    footerTD.className = "td-foot";
	    footerTD.id = "birthday-td-foot";
	    if (this.config.debugging) {
		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
	    }
	    else {
		footerTD.innerHTML = "";
	    }

	    footerTR.appendChild(footerTD);
	    tFooter.appendChild(footerTR);
	    wrapper.appendChild(tFooter);
			
	    // Create TBODY section with day names
	    var eintraege = 3;
	    for (var i=1; i< =eintraege; i++) {
		var tBody = document.createElement("tBody");
		tBody.className = "tbody";
		tBody.id = "birthday-tbody";

		var bodyTR = document.createElement("tr");
		bodyTR.className = "tr-body";
		bodyTR.id = "birthday-tr-body";

		var bodyTDimage = document.createElement("td");
		bodyTDimage.className = "td-image";
		bodyTDimage.id = "birthday-td-image";
		bodyTDimage.innerHTML = "23";

		var bodyTD = document.createElement("td");
		bodyTD.className = "td-body";
		bodyTD.id = "birthday-td-body";
		bodyTD.innerHTML = "Bettina Zimmermann&nbsp;&nbsp;< span class=\"age-span\"> 46 < /span > < /br > Frank Dubiel&nbsp;&nbsp; < span class=\"age-span\" > 54 < /span > < /br >Jürgen Gruse&nbsp;&nbsp; < span class=\"age-span\" > 52 < /span > ";

/*
		var bodyAgeSpan = document.createElement("span");
		bodyAgeSpan.className = "age-span";
		bodyAgeSpan.id = "birthday-age-span";
		bodyAgeSpan.innerHTML = "&nbsp;&nbsp;46";
		bodyTD.appendChild(bodyAgeSpan);
*/		

		bodyTR.appendChild(bodyTDimage);
		bodyTR.appendChild(bodyTD);
		tBody.appendChild(bodyTR);
		wrapper.appendChild(tBody);
	    }
	
	    this.loaded = true;
	    return wrapper;
	}
		
    },

this code looks like the image i did send before

Perlchamp

@sdetweil said in read csv-data and put it in an array:

when I had a big pile of html objects to create I wrote a little routine to hide the 4 lines per object

i will shurely take this, if my current html should work. now it’s too much “risk” for me, to change it.