Question

我的 TABLE 是空的。我有一个名为 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：

＆＃13;

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);
    });
  
});

＆＃13;

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

＆＃13;

Answer 2

在追加时在html中添加id而不是在下一个语句中添加id。也可以将此ID设为小写。

for ( var i in menu) {
    $('#menutable').append('<tr class ="product" role="button" data-id="' + menu[i].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>');      
    id.push( menu[i].id);
}

使用表而不是文档委派click事件。

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

Answer 3

数据属性名称不应包含任何大写字母。首先，将数据ID 更改为数据ID ，然后使用$(this).data("id")

获取

Answer 4

我的建议是：

var menu=[{id: 1, num: '1', name: 'prod1', ingred: '', price: 10}, {id: 2, num: '2', name: 'prod2', ingred: '', price: 20}, {id: 3, num: '3', name: 'prod3', ingred: '', 'price': 30}];
var id = [];
$(function () {
  for ( var i in menu) {
    $('#menutable').append('<tr class ="product" role="button" data-id="' + menu[i].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>')
    id.push(menu[i].id);
  }
  $('#log').append('<p>' + id + '</p>');
});


$(document).on('click','tr', function() {
  var id = $(this).data('id');
  $('#log').append('<p>' + id + '</p>');
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<table id="menutable"></table>
<div id="log"></div>

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

4 个答案: