`
zhujinguo
  • 浏览: 129844 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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); 
分享到:
评论

相关推荐

    javascript完全学习手册1 源码

    javascript完全自学手册 目 录 第1篇 JavaScript基础篇 第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 ...

    javascript完全学习手册2 源码

    第1篇 JavaScript基础篇 第1章 JavaScript简介 1.1 JavaScript概述 1.1.1 什么是JavaScript 1.1.2 JavaScfipt的基本特点 1.1.3 常用的Web开发语言 1.2 JavaScript的应用 1.2.1 客户端应用 1.2.2 服务器...

    源文件程序天下JAVASCRIPT实例自学手册

    源文件程序天下JAVASCRIPT实例自学手册 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 ...

    JavaScript基础和实例代码

    JavaScript电子书,包括了JavaScript的大部分知识,可以帮助读者快速入门。内容如下: 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 ...

    400个DreamWeaver插件

    mxp/Dreamweaver的drag layer函数在Mozilla M18 -Netscape 6下没有作用,这个插件是一个补丁 mxp/一个很不错的插件!很多朋友一定都想不打开客户端的默认邮件程序来发送email吧,这个插件就是插入一个这样的超连接。...

    精通JavaScript

    IE 5或更高版本 Mozilla Firefox 1.5.0.3或更高版本 服务器采用IIS5.1 或以上版本 数据库使用MS Access 2000以上 2.本书所附光盘实例代码: 第1章(\第1章) 查看1.2.htm中noscript显示效果的方法如下: 1.将...

    JavaScript应用177例

    1.对于代码35.1.htm,使用Mozilla Firefox浏览器可直接运行,如果使用IE浏览器,需要在服务器端运行。 2.对于代码35.2.html,需要IIS+PHP+MySQL或Apache+PHP+MySQL环境支持 35.1.htm 读取XML文档 35.2....

    精通javascript

    • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm 转义字符的使用 ...

    【卷一/共两卷】AJAX实战pdf高清版90M

    11.4.3 添加外部JS库 11.5 添加Ajax自动保存功能 11.5.1 修改库的代码 11.5.2 自动保存信息到数据库 11.6 重构 11.6.1 定义构造函数 11.6.2 修改AjaxWindowsjs库 11.6.3 指定protal命令 11.6.4 执行Aiax处理 11.6.5 ...

    JavaScript高级教程

    第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................

Global site tag (gtag.js) - Google Analytics