Javascript 变量到 html 数据属性

Question

我希望能够将 javascript 变量作为 html 表行元素中的数据传递，并在单击该行元素时记录数据。 追加/创建表格行的代码在 ajax 调用中。 在调用之外单击 function 我想单击已创建/附加的表行并获取数据变量。 这是当前代码

$.ajax({ 
...
  var name = 'superman'
  $('#myTable tbody').append('<tr class = 'table_class' id = 'table_id' data-person = name></tr>');
  });
...
$('#myTable tbody').on('click','table_class', function(){
    console.log($(this).dataset.name);
}

控制台日志的预期结果是：超人。

Answer 1

你有更多错误：

1. data-person= 必须是数据名
2. $('#myTable tbody').on('click','table_class', function(){ 应该是： $('#myTable tbody').on('click','.table_class', function(){
3. $(this).dataset。 应该是 this.dataset 或 $(this).data

片段：

 var name = 'superman'; $('#myTable tbody').append('<tr class ="table_class" id="table_id" data-name="' + name + '"><td>XXXX</td></tr>'); $('#myTable tbody').on('click', '.table_class', function () { console.log(this.dataset.name); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable"> <tbody> </tbody> </table>

Answer 2

如果要将 class 添加到<tr> ，请确保至少包含一个<td>子项，以便您可以实际单击该行。

 var table_id = 'table_id'; var table_class = 'table_class'; // AJAX logic start... var name = 'superman'; $('#myTable tbody').append( $('<tr>').attr('id', table_id).addClass(table_class).data('person', name).append( $('<td>').text(name) ) ); // AJAX logic end... $('#myTable tbody').on('click', `.${table_class}`, function() { console.log($(this).data('person')); });

 #myTable { border-collapse: collapse; } #myTable, #myTable th, #myTable td { border: thin solid grey; } #myTable th, #myTable td { padding: 0.5em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable"> <thead> <tr> <th>Name</th> </tr> </thead> <tbody> </tbody> </table>