jQuery 可点击行:如何在 ${this} 中找到我需要的值

Question

我被一个表格困住了，我希望其中的每一行都是可点击的。单击一行将启动一个函数，使用该行的第一个单元格的值(我将其放在<p>中(作为参数，下表如下。

for (var i=0;i<changeList.length;i++){
$('#tableOfChanges').append('<tr class="changeRow"><td  style="width:10%"><p id="changeId" value="'+changeList[i][0]+'">'+changeList[i][0]+'</p></td>'+
'<td style="width:10%">'+changeList[i][1]+'</td>'+
'<td style="width:20%">'+changeList[i][2]+'</td>'+
'<td style="width:10%">'+changeList[i][3]+'</td>'+
'<td style="width:5%">'+changeList[i][4]+'</td>'+
'<td style="width:10%">'+changeList[i][5]+'</td>'+
'<td style="width:10%">'+changeList[i][6]+'</td>'+
'<td style="width:10%">'+changeList[i][7]+'</td></tr>');
}
}

这是使行可单击的函数，并将行的第一个单元格用作函数的参数。(例如，我只使用"alert(("函数(

$(document).on('click','.changeRow',function(){
var changeNumber=$(this).find('#changeId').val();
alert(changeNumber);
})

我的问题是这段代码，alert 函数只返回一个空值。我尝试了许多选项，但警报要么不显示任何内容，要么"[对象对象]">

有人会经历类似的情况吗？提前感谢您的帮助

Answer 1

for (var i=0;i<changeList.length;i++){
$('#tableOfChanges').append('<tr class="changeRow"><td  style="width:10%"><p id="changeId"'+i+'" value="'+changeList[i][0]+'">'+changeList[i][0]+'</p></td>'+
'<td style="width:10%">'+changeList[i][1]+'</td>'+
'<td style="width:20%">'+changeList[i][2]+'</td>'+
'<td style="width:10%">'+changeList[i][3]+'</td>'+
'<td style="width:5%">'+changeList[i][4]+'</td>'+
'<td style="width:10%">'+changeList[i][5]+'</td>'+
'<td style="width:10%">'+changeList[i][6]+'</td>'+
'<td style="width:10%">'+changeList[i][7]+'</td></tr>');
}
}

$(document).on('click','.changeRow',function(){
var changeNumber=$(this).find('p').attr('value');
alert(changeNumber);
})

Answer 2

<p>元素没有值，使用data-*属性来保存用户定义的数据，并使用.data()访问它。不能重复 ID，因此应使用类。

var changeList = [
[1, 2, 3, 4, 5, 6, 7, 8],
[10, 11, 12, 13, 14, 15, 16, 17],
[19, 20, 21, 22, 23, 24, 25, 26]
];
for (var i = 0; i < changeList.length; i++) {
$('#tableOfChanges').append('<tr class="changeRow"><td  style="width:10%"><p class="changeId" data-value="' + changeList[i][0] + '">' + changeList[i][0] + '</p></td>' +
'<td style="width:10%">' + changeList[i][1] + '</td>' +
'<td style="width:20%">' + changeList[i][2] + '</td>' +
'<td style="width:10%">' + changeList[i][3] + '</td>' +
'<td style="width:5%">' + changeList[i][4] + '</td>' +
'<td style="width:10%">' + changeList[i][5] + '</td>' +
'<td style="width:10%">' + changeList[i][6] + '</td>' +
'<td style="width:10%">' + changeList[i][7] + '</td></tr>');
}
$(document).on('click', '.changeRow', function() {
var changeNumber = $(this).find('.changeId').data("value");
alert(changeNumber);
})

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