如何從點擊表格行獲取屬性值

Question

我有一個表這是空的。我有一個名爲的菜單，其中包含一些產品的列表。 下面的代碼重複菜單並在表中創建的行數與菜單數組中的產品數量一樣多。

要識別行中的產品，我能想到的最佳方法是使用屬性; 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>

Answer 2

當您追加而不是在下一個語句中添加id時，請在html中添加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); 
} 

委託點擊事件與表而不是文檔。

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