JavaScript动态创建表格单元格图片并绑定点击事件

作者:窗边听雨

时间:2026-10-28

浏览:183

本文演示如何使用JavaScript在表格单元格(td)中动态创建图片元素(img),并通过setAttribute和直接赋值两种方式注册点击事件。代码包含获取DOM节点、创建元素、设置属性及追加子节点的完整流程,适用于需要交互的表格场景。

文章目录

JavaScript动态创建表格单元格图片并绑定点击事件

本次示例涉及在表格单元格中动态插入图片,并额外要求实现点击图片时的响应逻辑。具体实现代码如下:


代码如下:

 
<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事件中调用上述函数即可生效。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章