read csv-data and put it in an array

[sdetweil]

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

  headerTH.innerHTML = " ";

all things are empty when created, so don’t need this

[sdetweil]

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

  else {
  footerTD.innerHTML = " ";
  }

don’t need this

[sdetweil]

fixed createEl routine

createEl : function (type, id, className, parent){

	var el= document.createElement(type)
	if(id)
		el.id=id
	if(className)
		el.className=className
	if(parent)
		parent.appendChild(el)
	return el

},

[sdetweil]

new getDom(), without header or footer

	getDom: function() {
		var wrapper = this.createEl("div",null,null,null);

		if(Object.keys(this.active_birthdays).length>0){

			// create your table and header here
		    // create TBODY section with day names
		    var tBody = this.createEl("tBody", "birthday-tbody", "tbody", wrapper );	

			for(var birthday of Object.keys(this.active_birthdays)){
				for(var person of this.active_birthdays[birthday]){
			
				    var bodyTR = this.createEl("tr", "birthday-tr-body",null, tBody);

					    var bodyTDimage = this.createEl("td","birthday-td-image", null, bodyTR );

					    	bodyTDimage.appendChild(document.createTextNode(birthday));

					    var bodyTD = this.createEl("td", "birthday-td-body", null, bodyTR );

							bodyTD.appendChild(document.createTextNode(person.name));
			
					     
						var ageTD = this.createEl("td","birthday-td-age", null, bodyTR  );
			 
					    	ageTD.appendChild(document.createTextNode(person.age)); 

				}
			}
		}
// create your table footer here	

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

[Perlchamp]

the classes are not addressed :

… without header and footer.
why the classes are null ?

[sdetweil]

@Perlchamp sorry, typo
className with upper case

	createEl : function (type, id, className, parent, value){

		var el= document.createElement(type)
		if(id)
			el.id=id
		if(className)
			el.className=className
		if(parent)
			parent.appendChild(el)
		if(value)
			el.appendChild(document.createTextNode(value))
		return el

	},

[Perlchamp]

i set the classes in uppercase, allthough in the css-file. but the classes are not adressed.
by the way. maybe there is a problem with TWO cells in a row, because the daynumbers are OVER the names. if you look at the picture i send before (not the last post), than you can see, that the daynumbers are in ONE row with the names …

[sdetweil]

@Perlchamp well, part of the problem is the ID of the cells is the same for each row… removing id and class (which I don’t have)
works

cells don’t NEED ids… but if u wanted, you would have to create a counter to append each loop to make the ids unique

new createEl which does text value too

	createEl : function (type, id, className, parent, value){

		var el= document.createElement(type)
		if(id)
			el.id=id
		if(className)
			el.className=className
		if(parent)
			parent.appendChild(el)
		if(value)
			el.appendChild(document.createTextNode(value))
		return el

	},

and table header

	createTableHeader: function(parent, className, columnlabels){

		var header = document.createElement("tr")
		for(columnName of columnlabels){
			this.createEl("th",null,className, header,columnName)
		}
		parent.appendChild(header)
		return header
	},

getdom()

	// this is the major worker of the module, it provides the displayable content for this module
	getDom: function() {
		var wrapper = this.createEl("div",null,null,null);

		if(Object.keys(this.active_birthdays).length>0){

			// create your table  here
			var table = this.createEl("table", "birthday-table", null, wrapper );

			// table header here, array of column names
			var table_header=this.createTableHeader(table, null, ["date","Name","age"])

		    // create TBODY section with day names
		    var tBody = this.createEl("tBody", "birthday-tbody", null, table );	

			for(var birthday of Object.keys(this.active_birthdays)){
				for(var person of this.active_birthdays[birthday]){
			
				    var bodyTR = this.createEl("tr", null,null, tBody);

					    var bodyTDimage = this.createEl("td",null, null, bodyTR , birthday );

					    var bodyTD = this.createEl("td", null, null, bodyTR , person.name);
					     
						var ageTD = this.createEl("td",null, null, bodyTR  ,person.age );

				}
			}
		}
// create your table footer here	

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

[Perlchamp]

ok, i’ve seen, the header function … uff, all is placed right (code).
i don’t see the day of birth. the first cell is still the problem :-(

[sdetweil]

@Perlchamp with my code I see
I removed class
date Name age
12.05 Sam 69
02.05 Frank 81
02.05 Sue 81
05.05 mary 65
10.05 eee EEEEE 51
16.05 fff FFFFF 8
16.05 ggg GGGGG 32
27.05 hhh HHHHH 18