How to get a value from a td from the column name

Question

How to get a value from a td from the column name

Navigation

#1 by (4 votes)

0

I would like to get the value of the td of a table by the name of the column.

 //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><!DOCTYPEhtml><htmllang="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><scriptsrc="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>

html jquery dom

asked by anonymous 30.07.2017 / 22:12

1 answer

PHP While Generating Loop More Enable and disable fields by clicking checked

score 4 · Accepted Answer

It is possible to get 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 then it will be necessary to pass the index (line number) that you want to get the value, ie:
In your question you tried to get the value with just the name of the column using the seginte code:

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

With the above code even if js could do the intended operation it could not be able to return the value of the Table Cell because the complete routing was not indicated. 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 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><!DOCTYPEhtml><htmllang="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><scriptsrc="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>