Question posted in
You can find the official documentation here.

Javascript variable to html data attribute – Jquery ajax

I am looking to be able to pass a javascript variable as data in an html table row element and have the data logged when that row element is click. The code that is appending/creating the table rows is inside an ajax call. Outside of the call in a click function I want to click on a table row that was created/appened and get the data variable. Here is the current code

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

The expected result of the console log is to be: superman.

Tags:

2

Answers


  1. 0

    You have more errors:

    1. data-person= must be data-name
    2. $(‘#myTable tbody’).on(‘click’,’table_class’, function(){ should be:
      $(‘#myTable tbody’).on(‘click’,’.table_class’, function(){
    3. $(this).dataset. should be this.dataset or $(this).data

    The snippet:

    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>
    Login or Signup to reply.
  2. 0

    If you are adding the class to the <tr>, make sure you include at least one <td> child so that you can actually click on the row.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search