js動(dòng)態(tài)往表格的td中添加圖片并注冊事件
更新時(shí)間：2014年06月12日 16:18:43 投稿：whsnow
這篇文章主要介紹了使用js動(dòng)態(tài)往表格的td中添加圖片并注冊事件,需要的朋友可以參考下
這回的小case如題，額外還有一個(gè)，當(dāng)點(diǎn)擊圖片時(shí)響應(yīng)事件。代碼如下：
<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(){ //點(diǎn)擊時(shí)響應(yīng)事件
alert("點(diǎn)擊");
//window.location = "http://baidu.com"; 跳轉(zhuǎn)url
};
_td.appendChild(_img);
}
</script>
在body中的onload事件調(diào)用上面這個(gè)函數(shù)就可以了。
復(fù)制代碼 代碼如下:
<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(){ //點(diǎn)擊時(shí)響應(yīng)事件
alert("點(diǎn)擊");
//window.location = "http://baidu.com"; 跳轉(zhuǎn)url
};
_td.appendChild(_img);
}
</script>
在body中的onload事件調(diào)用上面這個(gè)函數(shù)就可以了。
您可能感興趣的文章:
- JS動(dòng)態(tài)修改圖片的URL（src）的方法
- js動(dòng)態(tài)切換圖片的方法
- js浮動(dòng)圖片的動(dòng)態(tài)效果
- JavaScript 動(dòng)態(tài)改變圖片大小
- JS實(shí)現(xiàn)動(dòng)態(tài)給圖片添加邊框的方法
- JS中通過url動(dòng)態(tài)獲取圖片大小的方法小結(jié)(兩種方法)
- JavaScript動(dòng)態(tài)生成二維碼圖片
- javascript實(shí)現(xiàn)瀑布流動(dòng)態(tài)加載圖片原理
- js、jquery圖片動(dòng)畫、動(dòng)態(tài)切換示例代碼
- javascript 動(dòng)態(tài)調(diào)整圖片尺寸實(shí)現(xiàn)代碼
- JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法完整示例
相關(guān)文章
使用JS實(shí)現(xiàn)在圖片上顯示左右箭頭的翻頁代碼.實(shí)例使用了javascript的onmousemove 事件,onmousemove 事件會(huì)在鼠標(biāo)指針移動(dòng)時(shí)發(fā)生,感興趣的你可以參考下本文或許對(duì)你有所幫助2013-03-03
JavaScript實(shí)現(xiàn)的Tween算法及緩沖特效實(shí)例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的Tween算法及緩沖特效,涉及JavaScript通過數(shù)學(xué)運(yùn)算及樣式屬性操作實(shí)現(xiàn)緩動(dòng)、彈性運(yùn)動(dòng)等效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
JavaScript一種沒有類的，面向?qū)ο蟮恼Z言，它使用原型繼承來代替類繼承。2010-11-11
JavaScript選取(picking)和反選(rejecting)對(duì)象的屬性方法
這篇文章主要介紹了JavaScript選取(picking)和反選(rejecting)對(duì)象的屬性方法的相關(guān)資料,需要的朋友可以參考下2017-08-08
JS使用for in有序獲取對(duì)象數(shù)據(jù)
這篇文章主要介紹了JS使用for in有序獲取對(duì)象數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JS獲取今天是本月第幾周、本月共幾周、本月有多少天、是今年的第幾周、是今年的第幾天的示例代碼
這篇文章主要介紹了JS獲取今天是本月第幾周、本月共幾周、本月有多少天、是今年的第幾周、是今年的第幾天,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
前端請(qǐng)求并發(fā)和請(qǐng)求覆蓋的解決方法
最近在開發(fā)一些大屏,涉及到比較多的數(shù)據(jù)來源,接口也沒有做聚合,導(dǎo)致頁面需要調(diào)很多接口來填充頁面數(shù)據(jù),那么就會(huì)有接口并發(fā)的問題出現(xiàn),所以本文給大家介紹了如何解決前端請(qǐng)求并發(fā)和請(qǐng)求覆蓋,需要的朋友可以參考下2024-10-10
今天小編就為大家分享一篇解決Layui 表單提交數(shù)據(jù)為空的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
javascript+canvas實(shí)現(xiàn)刮刮卡抽獎(jiǎng)效果
這篇文章主要介紹了javascript+canvas實(shí)現(xiàn)刮刮卡抽獎(jiǎng)效果的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章主要為大家分享了js編寫一個(gè)簡單的產(chǎn)品放大效果代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06