read csv-data and put it in an array

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

[sdetweil]

@Perlchamp not a css class wizard

[Perlchamp]

no i don’t override the general td-class, cause i use:
.modulname .classname
{
font: 16px;
…
}

[sdetweil]

@Perlchamp but you SET the ONLY classname to be yours… classame=
wipes out what was there

you do not append yours to the list of classNames already assigned className +=

[Perlchamp]

ok, i will try

[Perlchamp]

doesn’t work either

[sdetweil]

@Perlchamp bummer

[Perlchamp]

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

where i have to place it ?

sam, take my going code and see by yourself. here is the css:

/*
.birthdaylist .app {
    width: 200px;
    padding: 0px;
}
*/

.birthdaylist .table {
  padding: 0px;
  margin: 0px;
/*
  border: 1px solid white;
  width: 200px;
*/
}

.birthdaylist .thead {

}

.birthdaylist .tr-head {

}

.birthdaylist header {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 20px;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-weight: 400;
  border-bottom: 1px solid #444444;
  line-height: 20px;
  padding-bottom: 5px;
  color: #ffffff;
/*
  font-variant: small-caps;
*/
}

.birthdaylist .tfoot {

/*
  height: 10px;
  padding: 0px;
  margin: 0px;
*/
}

.birthdaylist .tr-foot {

/*
  height: 10px;
  padding: 0px;
  margin: 0px;
*/
}

.birthdaylist .td-foot {
  line-height: 16px;
  font-size: 16px;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  padding: 0px;
  margin: 0px;
/*
  border: 1px solid #444444;
*/
}

.birthdaylist .tbody {

}

.birthdaylist .tr-body {

}

.birthdaylist .td-image {
  width: 27px;
  background-repeat: no-repeat;
  background-position: top left;
  background-image: url("/modules/birthdaylist/images/kalenderblatt.png");
  font-size: 20px;
  color: #000000;
  font-weight: 400;
  line-height: 26px;
  vertical-align: top;
  text-align: center;
  margin: 0px;
  padding: 10px 0px 0px 0px;
/*
  border: 1px solid orange;
  height: 28px;
*/
}

.birthdaylist .td-body {
  font-size: 18px;
  text-transform: uppercase;
  color: #888888;
  letter-spacing: 0.1em;
  vertical-align: top;
  line-height: 22px;
  padding: 0px 0px 8px 8px;
  margin: 0px;
/*
  border: 1px solid orange;
  height: 28px;
  font-variant: small-caps;
  width: 160px;
*/
}

.birthdaylist span {
  color: orange;
  font-weight: bold;
}

[sdetweil]

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

where i have to place it ?
its just another routine like getDom()

I put it right in front of getDom

[Perlchamp]

and the parent-element itselfs get a 0 (null) as parent ?

[sdetweil]

@Perlchamp i usually don’t use it for wrapper, but yes… the routine would have to check and not set if parent null, same for id

[Perlchamp]

doesn’t work (black screen) yet, BUT:

1. the classes set in “” ?
2. no use of appendchild ?
3. the wrapper set in “” ?

i did :

1. no
2. correct
3. no

question:
get i problems with this.create… because of “var self = this” ?

[Perlchamp]

my code (only table):

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

	    // create header
	    var tHeader = this.createEl('thead', "birthday-thead", thead , wrapper)
	    //var tHeader = document.createElement("thead");
	    //tHeader.className = "thead";
	    //tHeader.id = "birthday-thead";

	    var headerTR = this.createEl('tr', "birthday-tr-head", tr-head , tHeader)
	    //var headerTR = document.createElement("tr");
	    //headerTR.className = "tr-head";
	    //headerTR.id = "birthday-tr-head";			    

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

	    //var footerTR = document.createElement("tr");
	    var footerTR = this.createEl('tr', "birthday-tf-foot", tr-foot , tFooter)
	    //footerTR.className = "tr-foot";
	    //footerTR.id = "birthday-tr-foot";

	    //var footerTD = document.createElement("td");
	    var footerTD = this.createEl('td', "birthday-td-foot", td-foot , footerTR)
	    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 = this.createEl('tBody', "birthday-tbody", tbody , wrapper)
	    //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 = this.createEl('tr', "birthday-tr-body", tr-body , tBody)
		    //var bodyTR = document.createElement("tr");
		    //bodyTR.className = "tr-body";
		    //bodyTR.id = "birthday-tr-body";

		    var bodyTDimage = this.createEl('td', "birthday-td-image", td-image , bodyTR)
		    //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.innerHTML = birthday.substring(0,2);

		    var bodyTD = this.createEl('td', "birthday-td-body", td-body , bodyTDimage)
		    //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);
		    
		}
	    }

[sdetweil]

@Perlchamp all except parent in quotes

tables parent is wrapper, wrappers parent is null/0