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

Question

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

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

我的问题出在这段代码上，警报函数只有 returns 一个空值。我尝试了很多选项，但警报要么不显示任何内容，要么显示“[object Object]”

有人遇到过类似情况吗？非常感谢您的帮助

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，因此您应该使用 class.

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>

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

jquery clickable row: how to find the value i need in ${this}

javascript

jquery

find

clickable