图像的HTML表格上的JavaScript

我有一张表格，其中每个单元格都是HTML中的图像。我需要单击功能，以便当您单击图像时，它会将您带到链接到图像的不同HTML页面。我知道我需要使用JavaScript来做到这一点，但任何推动正确的方向将是有帮助的。表中的每个图像单元都有自己的ID。图像的HTML表格上的JavaScript

<table align="center" style="width:100%"> 
 
    <tr> 
 
    <td> 
 
     <img src="http://images.genius.com/0bffd93463afe53e7f651f72bedfc78b.1000x1000x1.jpg" alt="The College Dropout" height="300" width="300" id="a1"></img> 
 
    </td> 
 
    <td> 
 
     <img src="https://images.genius.com/2eb75c8a4d53e8782d8e37681871a9bf.1000x1000x1.jpg" alt="Late Registration" height="300" width="300" id="a2"></img> 
 
    </td> 
 
    <td> 
 
     <img src="https://images.genius.com/336af3b66a79eb083a8469fa6f5c84c5.1000x1000x1.jpg" alt="Graduation" height="300" width="300" id="a3"></img> 
 
    </td> 
 
    <td> 
 
     <img src="https://images.genius.com/f69387025c516715db7b5d56037ee76a.1000x997x1.jpg" alt="808s_&amp_Heartbreak" height="300" width="300" id="a4"></img> 
 
    </td> 
 
    </tr> 
 
</table>

来源

2016-12-07 Joey Avioli

为什么不换你的图像到了''在标签HTML（即''）？（PS。'img'是一个自我关闭的html标记，您不需要''，而是使用单个标记''） – haxxxton

const images = document.querySelectorAll('table td img'); 
 

 
Array.from(images).forEach(function(img) { 
 
    let tableCell = img.parentNode; 
 
    
 
    let anchor = document.createElement('a'); 
 
    anchor.href = img.getAttribute('src'); 
 
    anchor.append(img); 
 
    
 
    tableCell.append(anchor); 
 
});

<table align="center" style="width:100%"> 
 
    <tr> 
 
    <td> 
 
     <img src="http://images.genius.com/0bffd93463afe53e7f651f72bedfc78b.1000x1000x1.jpg" alt="The College Dropout" height="300" width="300" id="a1"></img> 
 
    </td> 
 
    <td> 
 
     <img src="https://images.genius.com/2eb75c8a4d53e8782d8e37681871a9bf.1000x1000x1.jpg" alt="Late Registration" height="300" width="300" id="a2"></img> 
 
    </td> 
 
    <td> 
 
     <img src="https://images.genius.com/336af3b66a79eb083a8469fa6f5c84c5.1000x1000x1.jpg" alt="Graduation" height="300" width="300" id="a3"></img> 
 
    </td> 
 
    <td> 
 
     <img src="https://images.genius.com/f69387025c516715db7b5d56037ee76a.1000x997x1.jpg" alt="808s_&amp_Heartbreak" height="300" width="300" id="a4"></img> 
 
    </td> 
 
    </tr> 
 
</table>

来源

2016-12-07 03:21:18

最简单的解决方案是在与适当的URL包裹你的。请参阅下面的代码片段。

<table align = "center" style="width:100%"> 
 
    <tr> 
 
    <td> 
 
     <a href="https://www.google.com/"> 
 
     <img src = "http://images.genius.com/0bffd93463afe53e7f651f72bedfc78b.1000x1000x1.jpg" alt="The College Dropout" height="300" width="300" id = "a1"></img> 
 
     </a> 
 
    </td> 
 
    <td> 
 
     <a href="https://www.google.com/"> 
 
     <img src = "https://images.genius.com/2eb75c8a4d53e8782d8e37681871a9bf.1000x1000x1.jpg" alt="Late Registration" height="300" width="300" id = "a2"></img> 
 
     </a> 
 
    </td> 
 
    <td> 
 
     <a href="https://www.google.com/"> 
 
     <img src = "https://images.genius.com/336af3b66a79eb083a8469fa6f5c84c5.1000x1000x1.jpg" alt="Graduation" height="300" width="300" id = "a3"></img> 
 
     </a> 
 
    </td> 
 
    <td> 
 
     <a href="https://www.google.com/"> 
 
     <img src = "https://images.genius.com/f69387025c516715db7b5d56037ee76a.1000x997x1.jpg" alt="808s_&amp_Heartbreak" height="300" width="300" id = "a4"></img> 
 
     </a> 
 
    </td> 
 
    </tr> 
 
</table>

来源

2016-12-07 03:24:13 MrGood

图像的HTML表格上的JavaScript

回答

相关问题