Compare inputs with the same class and no id

Question

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

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

Answer 1

the advice I give you, is to enter each row of the table, and use the same as 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>

Answer 2

You can do this way, 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><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>
</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: https://jsfiddle.net/tw2b9mq8/11/

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

When you use the '.text' selector it takes all elements of this class, then you can choose between these elements using the 'eq' function'.

Answer 3

I check if the last typed field is in column 1 or 2 and depending on which one, I use the attribute next() or prev() to compare the entered value with the one in 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><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>
</table>