jquery - 如何在单击时从表格行获取属性值

Question

我有一个空的表。我有一个名为 menu 的数组，其中包含一些产品的列表。下面的代码迭代 menu 并在表中创建与 menu 数组中的产品数量一样多的行。

要识别行中的产品，我能想到的最好方法是使用属性； data-ID=""存储插入行中的产品的 id。

    var id=[];
$(document).ready(function addMenuToTable() {
    for ( var i in menu) {
        $('#menutable').append('<tr class ="product" role="button" data-id=""><td class"num">'+menu[i].num+'</td><td class="td-width"><span><b>'+menu[i].name+' </b></span><br>'+menu[i].ingred+'</td><td>'+menu[i].price+'</td></tr>');
        $('#menutable tr').attr('data-id', menu[i].id);
        id.push( $('#menutable tr').attr('data-id'));
    }
    console.log(id);
});

现在，点击任意行，我想检索该特定产品的 ID。

    $(document).on('click','tr', function() {
    var id = $(this).attr('data-id');
    console.log(id);
});

但是当我使用 console.log 测试它时，无论我单击哪一行，我都只能获得最后一个产品 id。有什么建议我做错了什么吗？

Answer 1

<强> Data Attributes应为小写。将其更改为data-id。

由于您正在寻找数据属性的值，因此您可以使用 jQuery 的 .data()获取值，并使用 $(this) 获取被单击的 jQuery 项目:

var id = $(this).data('id');

EG:

var menu = [];
menu.push({id:"1",num:1,name:"one",ingred:"uno",price:"1.11"});
menu.push({id:"2",num:2,name:"two",ingred:"dos",price:"2.22"});

$(function(){//on document ready...
  
    (function addMenuToTable(){
        for (var i in menu){
            $('#menutable').append('<tr data-id="'+menu[i].id+'" class="product" role="button" data-ID=""><td class"num">'+menu[i].num+'</td><td class="td-width"><span><b>'+menu[i].name+' </b></span><br>'+menu[i].ingred+'</td><td>'+menu[i].price+'</td></tr>');
        }
    })();//IIFE
  
    //listen for clicks
    $('#menutable').on('click','tr', function(){
        var id = $(this).data('id');
        alert(id);
    });
  
});

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