Find table rows with the same input values

Question

I am looking for a way to put the word "equal" in the first column and highlight the "tr" of all rows where the input values are equal, as in the image. I have this code but it only works if the next - next row is the same:

$('.equal').each(function() {

 var car= $(this).closest("tr").find(".car").val();
 var model= $(this).closest("tr").find(".model").val();

 var car1= $(this).closest("tr").nextAll('tr').find(".car").val();
 var model1= $(this).closest("tr").nextAll('tr').find(".model").val();

 if(car==car1 && model==model1 ) {
 $(this).val("EQUAL");
 }

    <table >
    <tr>
            <td >Compare</td>
        <td >Car</td>
        <td>Model</td>
    </tr>
    <tr style="background-color:red">
        <td ><input  type="text" class="equal" value="EQUAL" ></td>
        <td ><input  type="text" class="car" value="Ford" ></td>
        <td><input  type="text" class="model" value="Mustang" ></td>
    </tr>
    <tr>
        <td><input  type="text" class="equal" value="" ></td>
        <td><input  type="text" class="car"  value="Mercedes Benz" ></td>
        <td><input  type="text" class="model" value="Clase A" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" >;</td>
        <td ><input  type="text" class="car"  value="Chevrolet" ></td>
        <td><input  type="text" class="model" value="Corvette" ></td>
    </tr>
    <tr style="background-color:red" >
        <td ><input  type="text" class="equal" value="EQUAL"></td>
        <td ><input type="text" class="car"  value="Ford" ></td>
        <td><input  type="text" class="model" value="Mustang" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" ></td>
        <td ><input  type="text"class="car"  value="Toyota" ></td>
        <td><input type="text" class="model" value="Corolla" ></td>
    </tr>

</table>

Reflective · Accepted Answer · 2021-10-31 20:48:02Z

1

Well, it might be not optimal but it dos the job.

var trs = $('table tr').toArray();
// remove the header TR from the collection
trs.shift();

$(trs).each(function(i, current) {

 var car = $(current).find(".car").val();
 var model = $(current).find(".model").val();
 
 var others = $.grep(trs, function(el) { 
   var car1 = $(el).find(".car").val();
   var model1 = $(el).find(".model").val();
   return ((el != current) && (car == car1) && (model == model1));
 });

if (others.length) {
  $(others).each(function(i, el){
   $(el).addClass('tr-red').find(".equal").val('EQUAL');
  });
 }

});

.tr-red{background:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table >
    <tr>
            <td >Compare</td>
        <td >Car</td>
        <td>Model</td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" ></td>
        <td ><input  type="text" class="car" value="Ford" ></td>
        <td><input  type="text" class="model" value="Mustang" ></td>
    </tr>
    <tr>
        <td><input  type="text" class="equal" value="" ></td>
        <td><input  type="text" class="car"  value="Mercedes Benz" ></td>
        <td><input  type="text" class="model" value="Clase A" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" >;</td>
        <td ><input  type="text" class="car"  value="Chevrolet" ></td>
        <td><input  type="text" class="model" value="Corvette" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value=""></td>
        <td ><input type="text" class="car"  value="Ford" ></td>
        <td><input  type="text" class="model" value="Mustang" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" ></td>
        <td ><input  type="text"class="car"  value="Toyota" ></td>
        <td><input type="text" class="model" value="Corolla" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" ></td>
        <td ><input  type="text"class="car"  value="Ford" ></td>
        <td><input type="text" class="model" value="Focus" ></td>
    </tr>
    <tr>
        <td ><input  type="text" class="equal" value="" >;</td>
        <td ><input  type="text" class="car"  value="Chevrolet" ></td>
        <td><input  type="text" class="model" value="Corvette" ></td>
    </tr>

</table>

answered Oct 31, 2021 at 20:48

Reflective

3,9371 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tonydeleon Over a year ago

Thank you much ! I’ll test it and I’ll let you know

tonydeleon Over a year ago

Thank you ! This works perfectly

Reflective Over a year ago

If so, you may tick it as best answer :)

Collectives™ on Stack Overflow

Find table rows with the same input values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related