Question

对不起，我是stackoverflow的新手，所以请原谅我，如果这还不够丰富。我刚刚学习了几天javascript和jquery。我创建了一个包含一些图像的表格，我现在尝试做的是使单击单元格时返回值（src）或索引号（单个）。

＆＃13;

$(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>';
        }	
            $('#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();
        });
    });    
});

＆＃13;

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

＆＃13;

到目前为止我收到的回报，数组中的所有图像项，数组中的项数或[Object Object]。我很感激帮助，如果有更多的信息需要我会尽我所能提供。谢谢。

Answer 1

＆＃13;

$(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>';
        }	
            $('#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();
        });
    });    
});

＆＃13;

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

＆＃13;

Answer 2

要在图像元素中获取src的值，首先需要选择正确的元素 img 来获取值。

你可以通过多种方式做到这一点，但在这里我附上了点击事件与表格的 td 。

在点击事件中，您可以按$（this）选择点击的 td 元素，然后您可以使用$（this）获取子图像元素。

获得图像标记后，您可以获取索引的src属性您可以将图像的索引存储在图像元素的属性中，稍后您可以检索它。

检查更新的代码段。

$(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>';
        }	
            $('#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>

如何使单元格可单击并返回值

2 个答案: