It is quite tedious to add elements manually. Thus, I thought why not add it using functions.
On trying, I noticed that basically I need a element id to add the elements for both types of requirement. Then, it comes to my mind to try new ways of doing it using classes. Furthermore, I would not want to repeat the part where I get the id of the element.
Thus, I created a "class" which has a nested class in it so that I could use syntax like
addElements("id").addtd(myarray)
Well, the syntax looks funny but it actually works. I use "closures" to achieve this. The code is as belows.
/*
General Syntax - AddElements("yourid").functionname(params)
params :-
1. array - a list of items defined by an array e.g. ["a","b","c","d","e"]
2. element,assocarray - and element and an assocarray e.g "span",{'class':'myclass','id':'myid'}
3. text - any text appropriate for the docid property involved
For the assocarray, it is a good practice to use single quotes even for the keys. If no property required then use "" instead.
Available functions:-
addtd(array) - add a table row pair ("TR") with TD populated by the items in the array
replOpt(array) - remove all the <select> options and populate the options from the array.
addE(element,assocarray) - add the element and set the property populated by the items in assocarray. See params 2 above
addStyle(text) -adds a style to the docid itself. e.g. "font-weight:bold;font-size:30px"
replStyle(text) -replaces a style to the docid itself. e.g. "color:red"
addText(text) - similar to addStyle but add the text into the textnode of the element involved.
replText(text) - similar to addText but replaces the content of the textnode of the element
*/
var addElements = function(docref) {
tbdid=document.getElementById(docref)
var addDomE = {
addtd: function(nodearray){
trid=document.createElement("tr");
for (ndtxt=0;ndtxt<>
tdid=document.createElement("td")
txtid=document.createTextNode(nodearray[ndtxt])
tdid.appendChild(txtid)
trid.appendChild(tdid)
tbdid.appendChild(trid)
}
},
replOpt: function(nodearray){
for (ndtxt=tbdid.length-1;ndtxt>-1;ndtxt--){
tbdid.remove(ndtxt)
}
selnid=document.createElement("option")
selnid.value=""
selnid.text="Please select"
selnid.selected=true
if(navigator.appName =="Microsoft Internet Explorer")
tbdid.add(selnid)
else
tbdid.appendChild(selnid)
for (ndtxt=0;ndtxt<>
selnid=document.createElement("option")
selnid.text=nodearray[ndtxt]
selnid.value=nodearray[ndtxt]
if(navigator.appName =="Microsoft Internet Explorer")
tbdid.add(selnid)
else
tbdid.appendChild(selnid)
}
},
addE: function (htmltag,params){
myelement=document.createElement(htmltag)
if (params != ""){
for (addEval in params){
if (addEval!="html"){
myattribute=document.createAttribute(addEval)
myattribute.nodeValue=params[addEval]
myelement.setAttributeNode(myattribute)
} else {
mytxtnode=document.createTextNode(params[addEval])
myelement.appendChild(mytxtnode)
}
}
}
tbdid.appendChild(myelement)
},
addStyle: function(params){ params = ";"+params
tbdid.style.cssText +=params
},
replStyle: function(params){
tbdid.style.cssText = params
},
addText: function(params){
mytxtnode=document.createTextNode(params)
tbdid.appendChild(mytxtnode)
},
replText: function(params){
mytxtnode=document.createTextNode(params)
mynodes=tbdid.childNodes
while (tbdid.hasChildNodes()){
tbdid.removeChild(tbdid.lastChild)
}
tbdid.appendChild(mytxtnode)
}
}
return addDomE;
}
;
In the HTML side you have to first setup one tbody element (not table element) with id to add td elements . For select element, you just use the select id.
Next , you create an array of td element or option element. Finally just use one of the following to do the trick
addElements("myid").addtd(myary);
addElements("selid").replOpt(myary);
addtd is for adding td elements. replOpt is for options element.
No comments:
Post a Comment