var HM = {
addAttributes : function(node, attributes){
if(node){
attributes = attributes || {};
for(var name in attributes){
node.setAttribute(name, attributes[name]);
}

return node;
}
},

addEvents : function(node, events){
if(node){
events = events || {};
for(var name in events){
Event.observe(node, name, events[name] );
}

return node;
}
},

createNode : function(tagName, attributes, events){
var node = document.createElement(tagName);

HM.addAttributes(node, attributes);
HM.addEvents(node, events);

return node;
},

getIgNodeChilds : function(node){
var len = node.childNodes.length;
var childs = [];

for(var i=0; i<len; i++){
if(typeof node.childNodes[i].tagName != 'undefined'){
childs.push(node.childNodes[i]);
}
}

return childs;
},

appendJson : function(node, json, tagName){
var len = json.length;
var nodes = [];

for(var i=0; i<len;i++){
var tag = HM.createNode(json[i].tag, json[i].attributes, json[i].events);

if(json[i].childs){
var childNodes = HM.appendJson(tag, json[i].childs, tagName);
nodes = nodes.concat(childNodes);
}

node.appendChild(tag);
if(typeof tagName != 'undefined' && tagName == tag.tagName){
nodes.push(tag);
}
}

return nodes;
}

}


필수로 prototype.js 가 필요합니다.
작업을 하다 보니, html을 만들면서 이벤트를 걸고 그래야 하는데
그러려면 innerHTML로는 조금 한계가 있는것 같고,
그렇다고 createElement로 작업하다 보니, 소스가 너무 길어 지더라구요.

그래서 만들게 되었습니다.


사용법은

var htmls = [
  {tag:'TR', childs:[
    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'40',name:'name[]'} }] },
    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data1[]',className:'inputNum'}, events:event }] },
    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data2[]',className:'inputNum'}, events:event }] },
    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data3[]',className:'inputNum'}, events:event }] },
    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data4[]',className:'inputNum'}, events:event }] },
    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data5[]',className:'inputNum'}, events:event }] },
    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data_total[]',disabled:'disabled'} }] }
  ]}
];


var row = HM.appendJson(tbody, htmls, "INPUT");

json 방식을 적어 주시면 됩니다.
하나의 node는
tag, attributes, events, childs 로 구성됩니다.
childs 가 존재할때는 해당 node에 appendChild 해 줍니다.

var HM	= {

	addAttributes : function(node, attributes){

		if(node){

			attributes	= attributes || {};

			for(var name in attributes){

				node.setAttribute(name, attributes[name]);

			}

			

			return node;

		}

	},



	addEvents : function(node, events){

		if(node){

			events		= events || {};

			for(var name in events){

				Event.observe(node, name, events[name] );

			}

			

			return node;

		}

	},



	createNode : function(tagName, attributes, events){

		var node	 = document.createElement(tagName);



		HM.addAttributes(node, attributes);

		HM.addEvents(node, events);

		

		return node;

	},



	getIgNodeChilds : function(node){

		var len		= node.childNodes.length;

		var childs	= [];



		for(var i=0; i<len; i++){

			if(typeof node.childNodes[i].tagName != 'undefined'){

				childs.push(node.childNodes[i]);

			}

		}



		return childs;

	},



	appendJson : function(node, json, tagName){

		var len		= json.length;

		var nodes	= [];



		for(var i=0; i<len;i++){

			var tag	= HM.createNode(json[i].tag, json[i].attributes, json[i].events);



			if(json[i].childs){

				var childNodes	= HM.appendJson(tag, json[i].childs, tagName);

				nodes	= nodes.concat(childNodes);

			}



			node.appendChild(tag);

			if(typeof tagName != 'undefined' && tagName == tag.tagName){

				nodes.push(tag);

			}

		}



		return nodes;

	}



}





필수로 prototype.js 가 필요합니다.

작업을 하다 보니, html을 만들면서 이벤트를 걸고 그래야 하는데

그러려면 innerHTML로는 조금 한계가 있는것 같고,

그렇다고 createElement로 작업하다 보니, 소스가 너무 길어 지더라구요.



그래서 만들게 되었습니다.





사용법은



var htmls	= [

  {tag:'TR', childs:[

    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'40',name:'name[]'} }] },

    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data1[]',className:'inputNum'}, events:event }] },

    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data2[]',className:'inputNum'}, events:event }] },

    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data3[]',className:'inputNum'}, events:event }] },

    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data4[]',className:'inputNum'}, events:event }] },

    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data5[]',className:'inputNum'}, events:event }] },

    {tag:'TD', childs:[{tag:'INPUT', attributes:{size:'20',name:'data_total[]',disabled:'disabled'} }] }

  ]}

];





var row	= HM.appendJson(tbody, htmls, "INPUT");



json 방식을 적어 주시면 됩니다.

하나의 node는

tag, attributes, events, childs 로 구성됩니다.

childs 가 존재할때는 해당 node에 appendChild 해 줍니다.