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

How to make a cell clickable and return the value

本文关键字：返回值 单击 何使 单元格      更新时间：2023-09-26

对不起，我是堆栈溢出的新手，所以如果这还不够信息，请原谅我。我刚刚学习了几天javascript和jquery。我已经创建了一个包含一些图像的表格，我现在要做的是使它成为当单击单元格时返回值（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]+'"></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();
        });
    });    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='show_table'></table>

到目前为止，对于我收到的退货，数组中的所有图像项，数组中的项数或[对象对象]。我感谢您的帮助，如果不再需要信息，我会尽力提供。谢谢。

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

您可以通过多种方式做到这一点，但在这里我将单击事件与表格的 td 附加在一起。

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

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

检查更新后的代码段。

$(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>

$(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();
        });
    });    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='show_table'></table>

相关文章：