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>