read csv-data and put it in an array

[Perlchamp]

getDom:

    getDom: function() {
	var self = this;
	var wrapper = document.createElement("div");
		
	// tell MM to call and get our content
	Log.log(JSON.stringify(this.active_birthdays))

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

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

	    // create header
	    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 = " ";
	    
	    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 = "&nbsp;";
	    }

	    footerTR.appendChild(footerTD);
	    tFooter.appendChild(footerTR);
	    wrapper.appendChild(tFooter);

	    // create TBODY section with day names
	    var tBody = document.createElement("tBody");
	    tBody.className = "tbody";
	    tBody.id = "birthday-tbody";
	    
	    for(var birthday of Object.keys(this.active_birthdays)) {
		for(var person of this.active_birthdays[birthday]) {
				
		    //var m = document.createElement('div');
				
		    // create looped row section
		    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";
		    if (birthday.charAt(0) === "0") {
			birthday = birthday.replace("0","");
			birthday = birthday.substring(0,1);
		    }
		    bodyTDimage.innerText = birthday.substring(0,2);

		    var bodyTD = document.createElement("td");
		    bodyTD.className = "td-body";
		    bodyTD.id = "birthday-td-body";
		    bodyTD.innerHTML = person.name + "&nbsp;&nbsp;&nbsp;<span class=\"age-span\">" + person.age + "</span>";
		    				
		    //m.innerText = birthday + ' ' + person.name + ' age=' + person.age;
		    //wrapper.appendChild(m);
		    
		    bodyTR.appendChild(bodyTDimage);
		    bodyTR.appendChild(bodyTD);
		    tBody.appendChild(bodyTR);
		    wrapper.appendChild(tBody);
		    
		}
	    }

	    // pass the created content back to MM to add to DOM.
	    return wrapper;

	}
	
	this.loaded = true;

/*
			


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

	    }
*/	
    },

[sdetweil]

@Perlchamp fiddling with it here… technically you are supposed to have a text element as a child of the td

< table>
   < tr>
      < td> value < /td>

var n = document.createTextNode(value);

[sdetweil]

@Perlchamp

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

			    var bodyTDimage = document.createElement("td");
			   // bodyTDimage.className = "td-image";
			    bodyTDimage.id = "birthday-td-image";
			   // bodyTDimage.innerHTML = birthday;
			    bodyTR.appendChild(bodyTDimage);
			    bodyTDimage.appendChild(document.createTextNode(birthday));

			    var bodyTD = document.createElement("td");
			   // bodyTD.className = "td-body";
			    bodyTD.id = "birthday-td-body";
			   // bodyTD.innerTEXT = person.name ;
				bodyTD.appendChild(document.createTextNode(person.name));
			    bodyTR.appendChild(bodyTD);		
			     

				var ageTD = document.createElement("td");
			   // bodyTD.className = "td-body";
			    ageTD.id = "birthday-td-age";
			    //ageTD.innerTEXT = person.age ;	 
			    ageTD.appendChild(document.createTextNode(person.age)); 
			    bodyTR.appendChild(ageTD);		

and set the class for the text element

[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.

[sdetweil]

@Perlchamp yep… and you could use divs(as row) and spans(as column) for the table, instead of table/tr/td

https://html-cleaner.com/features/replace-html-table-tags-with-divs/

[sdetweil]

@Perlchamp cool thing about the routine, if u decide to use div/span under instead is to fix the routine,
no mainline code has to change

[Perlchamp]

i don’t think so. therefor i’m a little bit toooooooo retro ;-)

[sdetweil]

@Perlchamp each to their own!..

[Perlchamp]

if i do this :

//bodyTDimage.className = "td-image";

it looks like:

and i ask me, WHY css is not working only for this cell !!

[sdetweil]

@Perlchamp td has a class, you are overriding it…
you want that class on the text in the td, not the td itself…

table, th, tr, all have classes… you can ADD a class instead of SET a class

+= adds to

[Perlchamp]

but the other cell (name plus age) works, WHY ?