Retrieving column values from a table by clicking row with jquery and html

Question

I'm using html5 and jquery to set up a dynamic table, until then I can add the elements to the table without problems, but I can not retrieve the value of its columns. so I have the following questions:

• How can I recover the table data by clicking the ROW?
• Should I always use the data-name, id for example as in the first line ?

$(document).on("change", "#TabClientesAdicionados", function(e) {
  alert('?');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<hr>
<table id="TabClientesAdicionados" class="table table-hover">
  <thead>
    <tr>
      <th> ID </th>
      <th> Name </th>
      <th> Actions </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-id="Bruno">1</td>
      <td data-nome="Bruno">Bruno</td>
      <td><a href="#">Details</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Josep</td>
      <td><a href="#"> Details 	</a></td>
    </tr>
  </tbody>
</table>

Answer 1

I would do as the following snippet.

You need to bind the event to the row tr ant then get each of its children.

By adding a data attribute you could set a column name. This could also help if you eventually needed to extract the value of an specific cell.

Incidentally you could also add a second data attribute named like data-value or something similar- This in case you are worried that your parsed html content might cause you trouble with the values.

$(document).ready(function() {

  $("#mytable").on('click', 'tr', onCellClick);
  //Bind the event to the table row

  function onCellClick() {
    let row = $(this); //get the jquery Object for the row
    let rowValues = {}; //An empty object to hold your data
    let temp;

    //extract the value of every cell in the row
    //Doing it this way gives you flexibility on the amount of colums you have
    row.find('td').each(function(item) {
      temp = $(this);
      rowValues[temp.data('column')] = temp.text();
      //this could be changed to  
      //rowValues[temp.data('column')] = temp.data('value);
      //if you desire to use a separate data-value property
    });

    console.log(rowValues);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%" id="mytable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td data-column="name" data-value="Jill">Jill</td> <!-Adding value property-->
    <td data-column="lastname">Smith</td>
    <td data-column="age">50</td>
  </tr>
  <tr>
    <td data-column="name">Eve</td>
    <td data-column="lastname">Jackson</td>
    <td data-column="age">94</td>
  </tr>
</table>

Answer 2

• How can I recover the table data by clicking the ROW?

  You can bind the click event to your TR elements and get the information.

• Should I always use the data-name, id for example as in the first line?

  Yes, because you don't want the parsed HTML to manipulate data. The data attributes are a better approach to keep related data (no HTML) to DOM elements.

Look at this code snippet

This approach binds the click event to TR elements

$('#TabClientesAdicionados tbody tr').click(function() {
  var data = { name: '', id: '' };
  
  $(this).children('td').each(function() {
    var name = $(this).data('nome');
    if (name) {
      data.name = name;
    }
    
    var id = $(this).data('id');
    if (id) {
      data.id = id;
    }      
  });
  
  console.log(data);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<hr>
<table id="TabClientesAdicionados" class="table table-hover">
  <thead>
    <tr>
      <th> ID </th>
      <th> Name </th>
      <th> Actions </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-id="Bruno_1">1</td>
      <td data-nome="Bruno">Bruno</td>
      <td><a href="#">Details</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Josep</td>
      <td><a href="#"> Details 	</a></td>
    </tr>
  </tbody>
</table>