How to pick a td value from the column name

Asked

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>

jquery html dom

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

  • 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?

1 answer

4


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>

  • Good morning Ivan, I know it’s been a while since you posted this answer but tell me one thing, if I want to hide the whole column by taking her index by the name of <th> as I would do?

  • @Gabrielcarneiro You can use a solution very similar to the method getColumnValue but in this specific case you would first have to identify the index of the column in question (line 2 - 7) and then in a recursive way or with a loop you will add in the style attribute display: none for each td with index found of each tr.

Browser other questions tagged jquery html dom

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