Question

我在表格中的每个td标签上加载一些卡片详细信息。当我点击特定的td数据时，如何获得特定点击值的索引。

我的桌子是。

    <table class="metricTable" border="2" bordercolor="white" 
           style="background-color:#066B12;">
    <tr>
        <td class="metrics" onMouseover="this.bgColor='#4DBD33';"  >                                
                <input type="hidden" value="matches"/>
                <input class="card_value" type="hidden" value=""/>
                <div class="card_content1" align="center"
                     style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
                <div class="card_content" align="center" 
                     style="color:#FFFFFF;font-weight: bold;"></div>                        
        </td>                                                                       
        <td class="metrics" onMouseover="this.bgColor='#4DBD33';">
                <input type="hidden" value="runs"/>
                <input class="card_value" type="hidden" value=""/>
                <div class="card_content1" align="center"
                    style="color:#FFFFFF;font-size:150%;font-weight: bold;">
                </div> 
                    <div class="card_content" align="center" 
                        style="color:#FFFFFF;font-weight: bold;">
                </div>                              
        </td>                                                           
        <td class="metrics" onMouseover="this.bgColor='#4DBD33';">                              
                <input type="hidden" value="centuries"/>
                <input class="card_value" type="hidden" value=""/>
                <div class="card_content1" align="center" 
                    style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div> 
                <div class="card_content" align="center" 
                     style="color:#FFFFFF;font-weight: bold;"></div>                            
        </td>
    </tr>
    <tr>
        <td class="metrics" onMouseover="this.bgColor='#4DBD33';">                          
            <input type="hidden" value="fifties"/> 
            <input class="card_value" type="hidden" value=""/>
            <div class="card_content1" align="center" 
                 style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div> 
            <div class="card_content" align="center" 
                 style="color:#FFFFFF;font-weight: bold;"></div>                        
        </td>                                                           
        <td class="metrics" onMouseover="this.bgColor='#4DBD33';">                      
            <input type="hidden" value="batting_average"/>
            <input class="card_value" type="hidden" value=""/>
            <div class="card_content1" align="center" 
                 style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div> 
            <div class="card_content" align="center" 
                 style="color:#FFFFFF;font-weight: bold;"></div>                    
        </td>                                                                       
        <td class="metrics" onMouseover="this.bgColor='#4DBD33';">                      
            <input type="hidden" value="wickets"/>
            <input class="card_value" type="hidden" value=""/>
            <div class="card_content1" align="center" 
                 style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div> 
            <div class="card_content" align="center" 
                 style="color:#FFFFFF;font-weight: bold;"></div>                                            
        </td>
    </tr>
    <tr>                                        
        <td class="metrics" onMouseover="this.bgColor='#4DBD33';">                      
            <input type="hidden" value="bowling_average"/>
            <input class="card_value" type="hidden" value=""/>
            <div class="card_content1" align="center" 
                 style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div> 
            <div class="card_content" align="center" 
                 style="color:#FFFFFF;font-weight: bold;"></div>                                            
        </td>                                               
        <td class="metrics" onMouseover="this.bgColor='#4DBD33';">                          
            <input type="hidden" value="best_bowling"/>
            <input type="hidden" value=""/>
            <input class="card_value" type="hidden" value=""/>
            <div class="card_content1" align="center" 
                 style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div> 
            <div class="card_content" align="center" 
                 style="color:#FFFFFF;font-weight: bold;"></div>                                                
        </td>                                                   
        <td class="metrics" onMouseover="this.bgColor='#4DBD33';" >
            <input type="hidden" value="catches"/>
            <input class="card_value" type="hidden" value=""/>
            <div class="card_content1" align="center" 
                 style="color:#FFFFFF;font-size:150%;font-weight: bold;">
            </div> <div class="card_content" align="center" 
                       style="color:#FFFFFF;font-weight: bold;"></div>                 
        </td>
    </tr>

</table>

嗨我有一个问题，请问如何获得这个价值。我通过这种方式将卡片装到桌子上，用户卡是var userCard =JSON.parse(localStorage['user_Card']);取自loacal storgae

并以这种方式$(this).find('.card_value').val(userCard[0][4]);

加载到表格中

我想得到这个（userCard[0][4]）用于比较，如何获得这个值？

如何获取特定点击的td标记的索引？

Answer 1

您可以使用index()函数，但这会为您提供与其所有兄弟姐妹相关的索引。

$("td").click(function(){
  alert($(this).index());
});

示例：假设td内有tr个，你单击第二个td，那么它的索引将为1（因为索引为零）

但对于其他tr，如果你点击第二个td那么它应该给你1，因为这些索引是关于所有兄弟姐妹而不是全局的。

找到像userCard [0] [4]这样的卡片值，使用下面的代码

$("td").click(function(){
      var card_val = $(this).find('.card_value').val();
      alert(card_val );
    });

Answer 2

在jquery中使用 .index()

$(".metricTable").on("click" , "td.metrics" , function(){
  console.log($(this).index());
});

如何获取表中特定点击值的索引？

2 个答案: