javascript - 简单的 javascript onClick 用于表数据

Question

我有一个 10 行图像表，当我单击它时，我尝试显示每个图像的 id。我已经尝试了很多很多不同的方法(下面的代码)但没有乐趣。希望有人可以纠正我。不过，任何 jquery 或其他聪明的东西都没有意义——我还不明白。只需一些简单的指导就会有很大帮助。

document.writeln('<table border = 1 >');

for (var j = 0; j < myArray.length; j++){
    if (j % 10 == 0 && j !== 0){
        document.writeln('</tr><tr>');
    }

    document.writeln('<td ><img id = "' + myArray[j].id + '" src="' + myArray[j].src + '" onclick = selectImage() /></td>');
}

document.writeln('</tr></table>');

function selectImage() {
    alert(document.getElementById(id));
}

Answer 1

您需要向 selectImage 方法添加一个参数，以便我们可以向这些方法发送一些信息。正如您在我的代码片段中看到的:

var myArray = [
  {
    id: "id01", 
    src: "src01.jpg"
  },
  {
    id: "id02", 
    src: "src02.jpg"
  },
  {
    id: "id03", 
    src: "src03.jpg"
  },
];

document.writeln('<table border = 1 >');

for (var j = 0; j < myArray.length; j++){
    if (j % 10 == 0 && j !== 0){
        document.writeln('</tr><tr>');
    }

    document.writeln('<td ><img id = "' + myArray[j].id + '" src="' + myArray[j].src + '" onclick = selectImage(this) /></td>');
}

document.writeln('</tr></table>');

function selectImage(a) {
    console.log(a.getAttribute('src'));
    console.log(a.getAttribute('id'));
}