Wie man eine Zelle klickbar macht und den Wert zurückgibt

Question

Sorry, ich bin neu bei stackoverflow, also bitte vergib mir, wenn das nicht informativ genug ist. Ich lerne gerade seit ein paar Tagen Javascript und jQuery. Ich habe eine Tabelle mit einigen Bildern erstellt, und was ich jetzt tun möchte, ist, dass beim Klicken auf eine Zelle der Wert (src) oder die Indexnummer (single) zurückgegeben wird.

$(function(){ 
 
    $('#show_table').ready(function(){ 
 
      
 
     //instantiate variables 
 
     var images =["auburn.png","beige.png","black.png","blue.png","bright_pink.png","bright_yellow.png","copper.png","dark_brown.png","dark_green.png", 
 
        "dark_navy.png","date.png","emerald.png","erin_green.png","green.png","grey.png","lavender.png","lemon.png","light_brown.png","light_grey.png", 
 
        "light_pink.png","medium_pink.png","ming.png","mint.png","mulberry.png","off_white.png","orange.png","orange_gold.png","pro_saxon.png", 
 
        "purple.png","red.png","royal_blue.png","russett.png","seafoam.png","slate_blue.png","sunflower.png"]; 
 
     //var img_longth = images.length; 
 
     var str = []; 
 
     var index = 0; 
 
     var i = 0; 
 
     //2 for loops to create table and assign each image a index number 
 
     for(var row=0;row<9;row++){ 
 
      str +='<tr>'; 
 
      for(var col = 0; col < 4; col++){ 
 
       // 
 
       //puts images into each cell within the table 
 
       if(index < images.length){ 
 
        str +='<td><img src="images/thread_squares/'+images[index]+'"></td>'; 
 
        index++; 
 
       } 
 
      } str +='</tr>'; 
 
     } \t 
 
      $('#show_table').html(str); 
 
      //alert(i); 
 
      
 
     //allows user to click specific color then returns the value 
 
     //also shows and hides table and designs in index.php 
 
     $('#show_table tbody').on('click', 'tr', function(event){ 
 
      alert(images); 
 
      //alert("looking good"); 
 
      $("#show_table").hide(); 
 
     }); 
 
    });  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='show_table'></table>

Bisher für die Rückkehr I erhalten habe, alle Bilder Elemente im Array, die Anzahl der Elemente im Array oder [Object]. Ich schätze die Hilfe und wenn es weitere Informationen gibt, werde ich mein Bestes tun, um es zu liefern. Vielen Dank.

Answer 1

Um den Wert des src in einem Bildelement zu erhalten, zuerst Sie richtig das Element img erhalten den Wert auswählen müssen.

Sie können es viele Möglichkeiten, aber hier habe ich das Click-Ereignis mit td der Tabelle angeschlossen.

Im Click-Ereignis können Sie das geklickte td Element von $ (this) auswählen und dann können Sie das Kind-Bildelement mit $ (this) erhalten.

Sobald Sie das Image-Tag erhalten, können Sie das src-Attribut erhalten, für Index können Sie den Index des Bildes in einem Attribut des Bildelements speichern und später können Sie es abrufen.

Überprüfen Sie das aktualisierte Snippet.

$(function(){ 
 
    $('#show_table').ready(function(){ 
 
      
 
     //instantiate variables 
 
     var images =["auburn.png","beige.png","black.png","blue.png","bright_pink.png","bright_yellow.png","copper.png","dark_brown.png","dark_green.png", 
 
        "dark_navy.png","date.png","emerald.png","erin_green.png","green.png","grey.png","lavender.png","lemon.png","light_brown.png","light_grey.png", 
 
        "light_pink.png","medium_pink.png","ming.png","mint.png","mulberry.png","off_white.png","orange.png","orange_gold.png","pro_saxon.png", 
 
        "purple.png","red.png","royal_blue.png","russett.png","seafoam.png","slate_blue.png","sunflower.png"]; 
 
     //var img_longth = images.length; 
 
     var str = []; 
 
     var index = 0; 
 
     var i = 0; 
 
     //2 for loops to create table and assign each image a index number 
 
     for(var row=0;row<9;row++){ 
 
      str +='<tr>'; 
 
      for(var col = 0; col < 4; col++){ 
 
       // 
 
       //puts images into each cell within the table 
 
       if(index < images.length){ 
 
        str +='<td><img src="images/thread_squares/'+images[index]+'" imageIndex="'+ index+'"></td>'; 
 
        index++; 
 
       } 
 
      } str +='</tr>'; 
 
     } \t 
 
      $('#show_table').html(str); 
 
      //alert(i); 
 
      
 
     //allows user to click specific color then returns the value 
 
     //also shows and hides table and designs in index.php 
 
     $('#show_table tbody').on('click', 'td', function(event){ 
 
      event.preventDefault(); 
 
      event.stopPropagation(); 
 
      
 
      alert($(this).children('img').attr('src')); 
 
      alert($(this).children('img').attr('imageIndex')); 
 
      
 
     }); 
 
    });  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='show_table'></table>

Answer 2

$(function(){ 
 
    $('#show_table').ready(function(){ 
 
      
 
     //instantiate variables 
 
     var images =["auburn.png","beige.png","black.png","blue.png","bright_pink.png","bright_yellow.png","copper.png","dark_brown.png","dark_green.png", 
 
        "dark_navy.png","date.png","emerald.png","erin_green.png","green.png","grey.png","lavender.png","lemon.png","light_brown.png","light_grey.png", 
 
        "light_pink.png","medium_pink.png","ming.png","mint.png","mulberry.png","off_white.png","orange.png","orange_gold.png","pro_saxon.png", 
 
        "purple.png","red.png","royal_blue.png","russett.png","seafoam.png","slate_blue.png","sunflower.png"]; 
 
     //var img_longth = images.length; 
 
     var str = []; 
 
     var index = 0; 
 
     var i = 0; 
 
     //2 for loops to create table and assign each image a index number 
 
     for(var row=0;row<9;row++){ 
 
      str +='<tr>'; 
 
      for(var col = 0; col < 4; col++){ 
 
       // 
 
       //puts images into each cell within the table 
 
       if(index < images.length){ 
 
        str +='<td><img src="images/thread_squares/'+images[index]+'"></td>'; 
 
        index++; 
 
       } 
 
      } str +='</tr>'; 
 
     } \t 
 
      $('#show_table').html(str); 
 
      //alert(i); 
 
      
 
     //allows user to click specific color then returns the value 
 
     //also shows and hides table and designs in index.php 
 
     $('#show_table tbody').on('click', 'tr', function(event){ 
 
      alert(event.target.src); 
 
      //alert("looking good"); 
 
      $("#show_table").hide(); 
 
     }); 
 
    });  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='show_table'></table>