Read the statement by Michael Teeuw here.
read csv-data and put it in an array
-
@Perlchamp eh? commenting out a line?
have a th is the same as what you have document.createElement(“th”)
-
wrong line, moment:
//bodyTDimage.className = "td-image";
this works, but unformatted, of course
i don’t like things like:
innerHTLM = tags, tags, tags … -
@Perlchamp eh? where is that?
-
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 = " "; } 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 + " <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 = " 46"; // bodyTD.appendChild(bodyAgeSpan); } */ },
-
@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);
-
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
-
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. -
@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 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
-
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 <span class=\"age-span\">46</span></br>Frank Dubiel <span class=\"age-span\">54</span></br>Jürgen Gruse <span class=\"age-span\">52</span>"; /* var bodyAgeSpan = document.createElement("span"); bodyAgeSpan.className = "age-span"; bodyAgeSpan.id = "birthday-age-span"; bodyAgeSpan.innerHTML = " 46"; bodyTD.appendChild(bodyAgeSpan); */ bodyTR.appendChild(bodyTDimage); bodyTR.appendChild(bodyTD); tBody.appendChild(bodyTR); wrapper.appendChild(tBody); } this.loaded = true; return wrapper; } },
and looks like :