画像のHTMLテーブルのJavaScript

Question

私は各セルがHTMLの画像であるテーブルを持っています。画像をクリックすると画像にリンクされた別のHTMLシートが表示されるように、クリック機能が必要です。私はこれを行うためにJavaScriptを使用する必要があることを知っていますが、正しい方向に何らかのプッシュが役立つでしょう。テーブル内の各画像セルには、それ自身のIDもあります。

<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>

Answer 1

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>

Answer 2

最も簡単な解決策は、適切な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>