圖像的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

回答

相關問題