How to pick a td value from the column name

Question

How to pick a td value from the column name

Asked 7 years, 3 months ago

Viewed 3,390 times

0

It would take the value of td of a table by the column name.

 //index definido por numero
 $valor=$('.table td').eq(0).text();
 alert("resultado com index numérico = "+$valor);
 
 //index definido pelo nome da coluna
 $valor=$('.table td').eq("Firstname").text();
 alert("resultado com o nome da coluna = "+$valor);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

In addition to the column it is necessary to specify the row. For the same column there are several values, one per row.

– Isac

2017/07/30 at 21:16
Your question is a little vague. Could you be more specific in your question? What value do you want to take? All values? What exactly are you trying to do?

– Chun

2017/07/30 at 22:41

1 answer

Browser other questions tagged jquery html dom

You are not signed in. Login or sign up in order to post.

by Ivan Vilanculo • **262** points · Answer 1 · 2017-07-30T21:28:26+00:00

It is possible to pick up the value of td using the column name, but for this you need to define your own function because javascript or jquery alone do not do this. And also note that even so it will be necessary to pass the index (number of the line) which intends to pick up the value, that is to say:
In your question you tried to take the value with only the column name using the code seginte:

 //index definido pelo nome da coluna
 $valor=$('.table td').eq("Firstname").text();

With the above code even though js can perform the intended operation could not be able to return the value of the tabla cell because it was not indicated in full string. See how it should work

Nome        | Apelido        
-------------------------------------
João        | Mario
-------------------------------------
Ana         | Maria
-------------------------------------

To get the nickname of Ana Maria we would have to tell the program that we want the Nickname and indicate the line where the same is located in this case 2 (1 in programming)
getColumnValue("Apelido", 1); // posição 0 seria para o João

See below for the solution to your problem.

var getColumnValue = function(columnName, index) {
  var column = null;
  
  $('table th').each(function(index, item) {
    //encontra o index da coluna em causa
    column = $(item).text() == columnName ? index : column;
  });

  $('table tr').each(function(row, item) {
    if (row != index + 1) return; //salta se a linha nao for a desejada
    columnValue = $(item).find('td').eq(column); //pega a celula da tabela
  });

  return $(columnValue).text();
};

//index definido por numero
$valor = $('.table td').eq(0).text();
alert("resultado com index numérico = " + $valor);

//index definido pelo nome da coluna
$valor = getColumnValue("Firstname", 1); //alterado para chamar a função costumisada
alert("resultado com o nome da coluna = " + $valor);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Striped Rows</h2>
    <p>The .table-striped class adds zebra-stripes to a table:</p>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>