本文演示如何使用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事件中调用上述函数即可生效。