当前位置: 代码迷 >> HTML/CSS >> js动态创造html(ie/mozilla)
  详细解决方案

js动态创造html(ie/mozilla)

热度:243   发布时间:2012-11-07 09:56:10.0
js动态创建html(ie/mozilla)
因为ie的兼容性问题(table节点下没法添加tr节点),原表格必须在table节点下有tbody节点,所有的tr节点都是在tbody节点之下。


	var table = document.getElementById('affixtable'); 
	var name = '删除';
	var tbody = document.createElement("Tbody");  
	
   	var tr = document.createElement("tr");  
   	tr.setAttribute('id',id);   
   	 
   	var td = document.createElement("td"); 
   	td.setAttribute('colspan',3);      
   	
   	var img = document.createElement("img");     
    img.setAttribute('src','images/accessories.gif');       
    
   	var span = document.createElement("span");    
   	span.setAttribute('innerText',id);   
   	
   	var a = document.createElement("a");     
   	a.setAttribute('href','javascript:del('+id+');');         
   	a.setAttribute('innerText',name);    
 
   	td.appendChild(img); 
   	td.appendChild(span); 
   	td.appendChild(a); 
   	tr.appendChild(td);  
   	tbody.appendChild(tr);     
   	table.appendChild(tbody);  



两种方式:直接给对象添加事件,节点添加事件
例如给一个id为tab1的添加onclick事件
第一种情况:
var t = document.getElementById("tab1");
t.onclick = function tst(){
    alert('');
}


第二种情况 这种情况更加动态,更为实用,而且还能添加多个函数(添加的事件的顺序即执行顺序)

   var tb = document.getElementById("tab1");
    if(window.addEventListener){ // Mozilla, Netscape, Firefox
        td_value.addEventListener('click', alert('11'), false);
        td_value.addEventListener('click', alert('12'), false);
    } else { // IE
        td_value.attachEvent('onclick',  function(){alert('21');});
        td_value.attachEvent('onclick',  function(){alert('2'2);});
    }


快速动态添加:

var defhtml = '<a id="newName" class="lightbox" href="'+url+'" title="凭证">'+name+'</a>';  
		$("#fileName").html(defhtml); 
  相关解决方案