4

Tenho uma tabela simples:

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>

Como eu faço para inserir a tag <mark></mark> no <td> que tem o menor valor com jQuery?

Assim:

<td class="pointer fmp-td"><mark>R$ 92.4</mark></td>
8
  • Primeiro, identifique a célula com o menor valor. Já conseguiu isso? Se sim, poste o código. Se não, descreva como você acha que é feito.
    – Woss
    Commented 26/07/2017 às 12:01
  • Não consegui. Eu pensei em listar todos os <td> que estão dentro da <tr> com o id #precos utilizando o $.each do jQuery depois pegar a que tiver o menor valor utilizando o Math.min.apply(Math, variavel). Depois adicionar a tag e substituir as <td>. Mas não consegui
    – Enio
    Commented 26/07/2017 às 12:05
  • A ideia parece correta. Tem como postar mesmo assim este código que tentou fazer? Ajudará a identificar exatamente qual foi seu erro.
    – Woss
    Commented 26/07/2017 às 12:10
  • So consegui achar o menor valor: jsfiddle.net/newtech/gr9xn8as
    – Enio
    Commented 26/07/2017 às 12:25
  • 1
    Você poderia editar o título da pergunta @usuario, está confuso.
    – BrTkCa
    Commented 26/07/2017 às 12:34

4 Respostas 4

4

A idéia aqui é:

  • Usar recursos do ES6 como spread operator e arrow function para retornar um array
  • Usar o Array#map para retornar somente o conteúdo dos tds
  • Aplicar a expressão regular /[0-9.]/g para capturar somente o valor numérico
  • Por fim encontrar o menor e usar o wrapInner do jQuery para criar a marcação

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

2
  • Como posso saber quais features do ES6 já posso utilizar em produção?
    – RFL
    Commented 26/07/2017 às 12:45
  • 1
    Muitos dos recursos já são suportados pelos novos browsers sem precisar usar um transpiler @RafaelAcioly. Podemos olhar aqui e aqui para ver a compatibilidade.
    – BrTkCa
    Commented 26/07/2017 às 12:48
2

Segue abaixo código comentado com cada etapa para marcar o menor valor com o 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>

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

2

Vi que já responderam a pergunta, mas estou contribuindo com mais uma solução do problema, minha resposta foi baseada em soluções encontradas aqui: Find the smallest value of a table 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>
<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>

1

Vamos separar por passos o que deve ser feito:

  1. Pegar todos os valores dentro de cada td.
  2. Coloca-los em ordem de menor para maior.
  3. Pegar o element com menor valor e inserir a tag <mark></mark> nele.

Passo 1:

Pegando todos os elementos:

$('#precos td.pointer');

Passo 2:

Colocar os elementos em ordem de acordo com o valor dentro do HTML, para isso podemos utilizar a função sort() que realiza um loop pegando de 2 em 2 elementos e comparando entre eles:

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;
});

Agora a variável values possui todos os elementos em ordem decrescente (menor para o maior), e assim podemos simplesmente pegar o primeiro elemento de values que sempre sera o maior e alterar o HTML

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

Veja abaixo o código funcionando:

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

1
  • Faltou só editar a explicação ali "ordem crescente (maior para o menor)", no caso o values ficou do menor para o maior agora.
    – Mathiasfc
    Commented 26/07/2017 às 12:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .