js动态往表格的td中添加图片并注册事件

这回的小case如题，额外还有一个，当点击图片时响应事件。代码如下：


代码如下:

<script type="text/javascript">
function onloadEvent(){
var _td = document.getElementById("a1");
var _img = document.createElement("img");
_img.setAttribute("id", "floatImage");
_img.setAttribute("src", "icon.png");
_img.setAttribute("onclick", "clickImage()");
_img.onclick = function(){ //点击时响应事件
alert("点击");
//window.location = "http://baidu.com"; 跳转url
};
_td.appendChild(_img);
}
</script>

在body中的onload事件调用上面这个函数就可以了。

赞 (0)

相关推荐

  • JavaScript动态添加事件之事件委托

    先给大家讲下什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 其所谓的动态添加事件实质就是指js中的事件委托. 我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是,我的元素是后来动态

  • JS动态给对象添加事件的简单方法

    WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt

  • 老生常谈js动态添加事件--- 事件委托

    其所谓的动态添加事件实质就是指js中的事件委托. 我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是,我的元素是后来动态添加到页面的,而我又想给该元素绑定事件,怎么处理? 为了说明白这一问题,我们假设需要给后来添加到当前页面的元素添加click事件. 解决这一问题的核心就是利用js的委托事件.委派事件的优势就是可以给未存在的元素绑定事件,而且委派事件往往开销也会更小! 题外话:举一个最简单的例

  • 多种方法实现JS动态添加事件

    方法一.setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 但是IE不支持用 setAttribute 设置某些属性,包括对象属性.集合属性.事件属性,也就是说用 setAttribute 设置 style.onclick.onmouseover 这些属性在 IE 中是行不通的.

  • js动态添加onclick事件可传参数与不传参数

    1)当方法没有参数时,赋值可以直接用onclick = 方法名 window.onload = function() { $('btnTest').onclick = test; } function test() { alert(val); } 2)当方法有参数时,用onclick = 方法名(参数)时就有错了,需要在方法名前面加function() window.onload = function() { $('btnTest').onclick= function() { test(1)

  • JS脚本实现动态给标签控件添加事件的方法

    本文实例讲述了JS脚本实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • js动态往表格的td中添加图片并注册事件

    这回的小case如题,额外还有一个,当点击图片时响应事件.代码如下: 复制代码 代码如下: <script type="text/javascript"> function onloadEvent(){ var _td = document.getElementById("a1"); var _img = document.createElement("img"); _img.setAttribute("id",

  • Android实现动态向Gallery中添加图片及倒影与3D效果示例

    Android实现动态向Gallery中添加图片及倒影与3D效果示例

    本文实例讲述了Android实现动态向Gallery中添加图片及倒影与3D效果的方法.分享给大家供大家参考,具体如下: 在Android中gallery可以提供一个很好的显示图片的方式,实现上面的效果以及动态添加数据库或者网络上下载下来的图片资源.我们首先实现一个自定义的Gallery类. MyGallery.java: package nate.android.Service; import android.content.Context; import android.graphics.Ca

  • js动态实现表格添加和删除操作

    js动态实现表格添加和删除操作

    本文实例为大家分享了js动态实现表格添加和删除的具体代码,供大家参考,具体内容如下 运行效果如图(两种实现方案,被注释的是第一种实现方案) 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ text-al

  • JS动态改变表格边框宽度的方法

    本文实例讲述了JS动态改变表格边框宽度的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过表格对象的border属性修改表格边框宽度 <!DOCTYPE html> <html> <head> <script> function changeBorder() { document.getElementById('myTable').border="10"; } </script> </head> <b

  • js动态修改表格行colspan列跨度的方法

    本文实例讲述了js动态修改表格行colspan列跨度的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script> function setColSpan() { var x=document.getElementById('myTable').rows[0].cells; x[0].colSpan="2"; x[1].colSpan="6"; } </sc

  • JS动态修改表格cellPadding和cellSpacing的方法

    本文实例讲述了JS动态修改表格cellPadding和cellSpacing的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过修改表格对象的cellPadding和cellSpacing属性来修改表格单元格的间距 <!DOCTYPE html> <html> <head> <script> function padding() { document.getElementById('myTable').cellPadding="15&quo

  • JS动态增删表格行的方法

    本文实例讲述了JS动态增删表格行的方法.分享给大家供大家参考,具体如下: function insertRow(tableName,className,bgcolor, cellContentArray){ var t = document.getElementByIdx(tableName); //取得table表 var tr = t.insertRow(); //插入一行 tr.className=className; //设置行的css tr.bgcolor=bgcolor; //设置行

  • js动态生成表格(节点操作)

    js动态生成表格(节点操作)

    本文实例为大家分享了js动态生成表格的具体代码,供大家参考,具体内容如下 针对DOM节点操作,该案例效果图如下(代码量不多,就没有结构与行为相分离): 原生js实现(注释里面解释了做法): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table

  • js 声明数组和向数组中添加对象变量的简单实例

    数组有四种定义的方式 使用构造函数: var a = new Array(); var b = new Array(10); var c = new Array("first", "second", "third"); 或者数组直接量: var d = ["first", "second", "third"]; 扩展: function ObjStory(id,biaoti,author

  • js获取UEditor富文本编辑器中的图片地址

    写之前在网上找了很多方法,最简单的思路应该是1.获取UEditor中的内容:2.将获取到的字符串转换成jquery对象:3.选择器找到img元素,获取src值. var content= UE.getEditor('details').getContent();//获取编辑器内容 var $div = document.createElement("div");//创建一个div元素对象 $div.innerHTML = content;//往div里填充html var $v = $

随机推荐