怎么给JS代码中的图片加超链接?

JavaScript019

怎么给JS代码中的图片加超链接?,第1张

imgArr.map(imglink =>{

const atags = document.createElement('a')

const imgtags = document.createElement('img')

imgtags.src = imglink.path

atags.href = imglink.path

atags.appendChild(imgtags)

})

思路:获取行对象→获取列对象→使用innerHTML为单元格添加超链接内容,实例演示如下:

1、HTML结构

<table id = "test">

<tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>

<tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>

<tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>

<tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>

</table>

第<input type="text" id="row">行第<input type="text" id="col">列<input type='button' value='确定' onclick="fun()"/>

2、javascript代码

function fun(){

row = document.getElementById("row").value - 1

col = document.getElementById("col").value - 1

tr = document.getElementById("test").getElementsByTagName("tr")

td = tr[row].getElementsByTagName("td")[col]

td.innerHTML = "<a href='#'>超链接</a>"

}

3、效果演示

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、新建index.js文件,将内嵌js内容添加到index.js文件中。

3、在index.html的head标签中新增引用代码:<script src="index.js"></script>。

4、浏览器运行index.html页面,此时成功引入index.js并调用其内容。