As a tag on an element of a table with jQuery?

Question

As a tag on an element of a table with jQuery?

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (2 votes)
#4 by (1 votes)

4

I have a simple table:

table {
  border-collapse: collapse;
}

table tr td {
  border: 1px solid #000;
}

mark {
  background: yellow;
}

<table width="300px" border="1px" bordercolor="#FF0000">
  <tbody id="qtdPrecos">
    <tr id="precos">
      <td class="pointer fmp-td">R$ 92.4</td>
      <td class="pointer fmp-td">R$ 137.48</td>
      <td class="pointer fmp-td">R$ 108.27</td>
      <td class="pointer fmp-td">R$ 129.25</td>
    </tr>
  </tbody>
</table>

How do I insert the tag <mark></mark> into <td> which has the lowest value with jQuery?

So:

<td class="pointer fmp-td"><mark>R$ 92.4</mark></td>

javascript jquery

asked by anonymous 26.07.2017 / 13:59

4 answers

2

Below is the commented code with each step to mark the lowest value with mark .

$(function() {

  function markMinValue() {
    var pricesTd = $('td', 'table #qtdPrecos #precos'),
      pricesValue = [],
      minValue,
      indexMinValue;

    // Percorre as linhas da tabela com preços
    $.each(pricesTd, function(indice, element) {
      // Armazena o valor de cada uma em uma variável temporária
      var value = $(element).text().replace('R$ ', '') * 1;
      // Adiciona no array o valor
      pricesValue.push(value);
    });

    // Busca o menor valor
    minValue = Math.min.apply(null, pricesValue);

    // Encontra o indice do menor valor
    indexMinValue = pricesValue.indexOf(minValue);

    // Marca o item com menor valor pelo indice encontrado
    $(pricesTd[indexMinValue]).wrapInner('<mark></mark>');

  }

  // Executa a função para marcar o item de menor valor
  markMinValue();

});

table {
  border-collapse: collapse;
}

table tr td {
  border: 1px solid #000;
}

mark {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablewidth="300px" border="1px" bordercolor="#FF0000">
  <tbody id="qtdPrecos">
    <tr id="precos">
      <td class="pointer fmp-td">R$ 92.4</td>
      <td class="pointer fmp-td">R$ 137.48</td>
      <td class="pointer fmp-td">R$ 108.27</td>
      <td class="pointer fmp-td">R$ 129.25</td>
    </tr>
  </tbody>
</table>

26.07.2017 / 14:30

2

I have already answered the question, but I am contributing one more solution to the problem, my answer was based on the solutions found here: Find the smallest value of a row row using javascript .

//Percorre as TDS da table e monta um ARRAY
var valoresNaTd = $('#qtdPrecos tr td').map(function() {
  var valor = $(this).text().substr(2);
  return valor;
}).get();

//Localiza o valor mínimo no array
var valorMinimo = Math.min.apply(Math, valoresNaTd);

//Coloca o mark na TD de menor valor
$('#qtdPrecos tr td').filter(function() {
  return $(this).text().substr(2) == valorMinimo;
}).wrapInner('<mark></mark>');

table {
  border-collapse: collapse;
}

table tr td {
  border: 1px solid #000;
}

mark {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablewidth="300px" border="1px" bordercolor="#FF0000">
  <tbody id="qtdPrecos">
    <tr id="precos">
      <td class="pointer fmp-td">R$ 92.4</td>
      <td class="pointer fmp-td">R$ 137.48</td>
      <td class="pointer fmp-td">R$ 108.27</td>
      <td class="pointer fmp-td">R$ 129.25</td>
    </tr>
  </tbody>
</table>

26.07.2017 / 14:34

1

Let's separate in steps what should be done:

Get all values within each td .

Places them in order from lowest to highest.

Get the element with the lowest value and insert the tag <mark></mark> into it.

Step 1:

Gathering all elements:

$('#precos td.pointer');

Step 2:

Place the elements in order according to the value inside the HTML , for this we can use the sort() function that takes a loop by taking two and two elements and comparing them:

var values = $('#precos td.pointer').sort(function(current, next) {
    // Substitui a string R$ por "vazio" e pega apenas os 
    // valore dentro do HTML e transforma em números.
    var one = parseFloat(current.innerHTML.replace('R$', ''));
    var two = parseFloat(next.innerHTML.replace('R$', ''));

    // Verifica se o valor atual é maior ou menor que o próximo
    if (one < two) return -1;
    return 1;
});

Now the variable values has all elements in descending order (lowest to highest), so we can simply get the first element of values which will always be the largest and change the HTML

$(values[0]).html('<mark>'+values[0].innerHTML+'</mark>');

See below the working code:

var values = $('#precos td.pointer').sort(function(current, next) {
    // Pega apenas os valore dentro do HTML e transforma em números.
    var one = parseFloat(current.innerHTML.replace('R$', ''));
    var two = parseFloat(next.innerHTML.replace('R$', ''));

    // Verifica se o valor atual é maior ou menor que o próximo
    if (one < two) return -1;
    return 1;
});

$(values[0]).html('<mark>'+values[0].innerHTML+'</mark>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablewidth="300px" border="1px" bordercolor="#FF0000">
   <tbody id="qtdPrecos">
      <tr id="precos">
         <td class="pointer fmp-td">R$ 92.4</td>
         <td class="pointer fmp-td">R$ 137.48</td>
         <td class="pointer fmp-td">R$ 108.27</td>
         <td class="pointer fmp-td">R$ 129.25</td>
      </tr>
   </tbody>
</table>

26.07.2017 / 14:39

How do I store an array in a string? [duplicate] Capturing the user's real IP

score 4 · Accepted Answer

The idea here is:

Use ES6 features like spread operator and arrow function to return an array
Use the Array # map to return only the content of tds
Apply the regular expression /[0-9.]/g to capture only the numeric value
Finally find the child and use the jQuery wrapInner to create the tag

const tds = [...document.getElementsByTagName('td')].map(item => Number(item.innerHTML.match(/[0-9.]/g).join('')));
const menor = Math.min.apply(Math, tds);

$('td').each(function() {
  if ($(this).html().indexOf(menor) > -1) {
    const aux = $(this).html();
    $(this).html('').wrapInner('<mark>' + aux + '</mark>');
  }
});

table {
  border-collapse: collapse;
}

table tr td {
  border: 1px solid #000;
}

mark {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablewidth="300px" border="1px" bordercolor="#FF0000">
  <tbody id="qtdPrecos">
    <tr id="precos">
      <td class="pointer fmp-td">R$ 92.4</td>
      <td class="pointer fmp-td">R$ 137.48</td>
      <td class="pointer fmp-td">R$ 108.27</td>
      <td class="pointer fmp-td">R$ 129.25</td>
    </tr>
  </tbody>
</table>