简单的javascript onClick表数据

Simple javascript onClick for table data

本文关键字:数据 onClick javascript 简单      更新时间:2023-09-26

我有一个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));
}

您需要为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'));
}

当调用selectImage时,尝试使用'this'关键字传递当前图像元素,即selectImage(this)

,然后在脚本中,您可以接收传递的对象并从中检索id属性。

function selectImage(obj)
{
alert(obj.id);
}