Compare inputs with the same class and without id

Navigation
1

Hello, I have the following structure 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><table><tr><th>Valor1</th><th>Valor2</th></tr><tr><td><inputclass="texto" type="text"></td>
    <td><input class="texto" type="text"></td>
  </tr>
  <tr>
    <td><input class="texto" type="text"></td>
    <td><input class="texto" type="text"></td>
  </tr>
</table>

I would like to compare if the value entered in column valor1 already exists in column valor2 , but the only form of identification that I have is class texto

    
asked by anonymous 16.04.2018 / 20:00

3 answers

5

The advice I give you is that it intersects each row of the table, and use the same as a scopo. 

var validar = document.getElementById("validar")
validar.addEventListener("click", function (evt) {
  // obtendo todas as linhas, para então interar as mesmas.
  var linhas = document.querySelectorAll("table tbody tr");
  [].forEach.call(linhas, function (linha, indice) {
    // buscando todos os inputs dentro da tr atual
    var inputs = linha.querySelectorAll(".texto");
    // verificando se o valor dos inputs é igual.
    if (inputs[0].value == inputs[1].value) {
      alert("inputs da linha " + (indice + 1) + " possuem o mesmo valor.");
    }
  })
})
<table>
  <thead>
    <tr>
      <th>Valor1</th>
      <th>Valor2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2"><input id="validar" type="button" value="Validar"></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td><input class="texto" type="text"></td>
      <td><input class="texto" type="text"></td>
    </tr>
    <tr>
      <td><input class="texto" type="text"></td>
      <td><input class="texto" type="text"></td>
    </tr>
  </tbody>
</table>
    
16.04.2018 / 20:23
3

You can do this the same html: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><table><tr><th>Valor1</th><th>Valor2</th></tr><tr><td><inputclass="texto" type="text"></td>
    <td><input class="texto" type="text"></td>
  </tr>
  <tr>
    <td><input class="texto" type="text"></td>
    <td><input class="texto" type="text"></td>
  </tr>
</table>

With the following jquery code: 

$(function(){  
    $('.texto').on('change', function(){

    var col1val1 = $('.texto').eq(0).val();
    var col1val2 = $('.texto').eq(2).val();

    var col2val1 = $('.texto').eq(1).val();
    var col2val2 = $('.texto').eq(3).val();

    if(col1val1 == col2val1 && col1val1 != ''){
        alert('Valor igual ao da outra coluna!');
    }

    if(col1val2 == col2val2 && col1val2 != ''){
        alert('Valor igual ao da outra coluna!');
    }

  });
})

Example: link

Using 'eq', you can get the 'text' item you want.

When you use the '.text' selector it picks up all elements of this class, so you can choose from these elements using the 'eq' function.

    
16.04.2018 / 20:13
0

I check if the last typed field is in column 1 or 2 and depending on which one, I use the next() or prev() attribute to compare the typed value with that of the opposite column. 

$(document).ready(function() {
  $('.texto').on('blur', function() {
    if($(this).parent().next().find('.texto').lenght) {
      if($(this).val() == $(this).parent().next().find('.texto').val()) {
        alert('valores iguais');
      }
    } else {
       if($(this).val() == $(this).parent().prev().find('.texto').val()) {
        alert('valores iguais');
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><table><tr><th>Valor1</th><th>Valor2</th></tr><tr><td><inputclass="texto" type="text"></td>
    <td><input class="texto" type="text"></td>
  </tr>
  <tr>
    <td><input class="texto" type="text"></td>
    <td><input class="texto" type="text"></td>
  </tr>
</table>
    
16.04.2018 / 20:24
Why subtract -48 from a char it becomes whole Why is it not possible to assign a string vector after it has been declared, a character?