0

Mi pregunta es la siguiente tengo una tabla en html la cual se llena con unos datos de base de datos que es la misma tabla la cual aparece en dos tablas en html que se busca por fecha la primer tabla en la que buscamos por la fecha y la segunda es la que tiene los datos mas actualizados de esa tabla, como puedo hacer que cuando le doy click en el boton llamado "Comparar Diferencias" me pueda pintar la celda del primera tabla en rojo y la otra celda de la otra tabla en verde si son diferentes como se muestra en este ejemplo, solo que en este ejemplo obligue que el segundo dato diera indefined para mostrarles el ejemplo.

$(document).ready(function () {
        $(".tab_content3").hide();
        $("ul.tabs3 li:first").addClass("active").show();
        $(".tab_content3:first").show();
        $("ul.tabs3 li").click(function () {
            $("ul.tabs3 li").removeClass("active");
            $(this).addClass("active");
            $(".tab_content3").hide();

            var activeTab = $(this).find("a").attr("href");
            $(activeTab).fadeIn();
            return false;
        });
    });

$(document).ready(function (){
    $('.compararD').on('click', function (e){
        e.preventDefault();
        //Evaluar que existan más de dos versiones para comparar
        if ($('input[name="comparar"]:checkbox:checked').length > 1) {
        
            //Limpiar antes de eveluar.
            compararTodo();
            
            //Eliminar columnas que no desean ser comparadas.
            $.each($("input[name='comparar']:checked"), function () {
                var tab = parseInt($(this).val()) + 1;
                $('.tab_content3 table tbody tr td:nth-child(' + tab + ')').show();
            });

            $("input[name='comparar']:checkbox:not(:checked)").each(function () {
                var tab = parseInt($(this).val()) + 1;
                $('.tab_content3 table tbody tr td:nth-child(' + tab + ')').hide();
            });
            
            //desplegar todas las tablas para poder evaluarlas con el parámetro de columna oculta.
            $('.tab_content3, .tab_content2').show();
            
            //Colores de los botones para tablas.
            var activo = $('.tabs3').find('.active');
            $('.tabs3').find('li').removeClass("active");
            
            //Recorrer todas la tablas
            $('.tab_content3, .tab_content2').each(function () {
            
                        //Encontrar tr obviar el primero
                    $(this).find('table tr:not(:first-child)').each(function () {
                        var valores = [];
                        var check = true;
                        
                        //Encontrar TD obviar el primero y no tomar en cuenta las columnas ocultas
                        //Aquí es donde hay que tener cuidado, al principio de este código se ejecuta $('.tab_content3').show();, si esto el código td:visible:not no toma encuenta ninguna columna de esas tablas
                        $(this).find('td:visible:not(:first-child)').each(function (index, value) {
                        
                            //Recorrer los valores y guardarlos en un array
              //console.log(this);
                            valores.push($(this).html())
                        })
                        
                        //Recorrer array y evaluar si existe uno distinto.
                        if (valores.length > 0) {


                            for (var i = 0, l = valores.length; i < l; i++) {
                                //console.log(valores[0]+"="+valores[i]);
                                if (valores[0] !== valores[1]) {
                                    check = false;
                                }
                            }

                            //Si existe al menos uno distinto se destaca con rojo.
                            if (check == false) {
                                //$(this).find('td').css('color','red');
                                $(this).find('td.red').css('background-color', 'red');
                                $(this).find('td.green').css('background-color', 'green');
                            } else {
                                //$(this).find('td').hide();
                            }
                        }
                        //console.log(valores);
                    })

            })
            //Restaurar tablas y seleccionar la activa.
            $('.tab_content3').hide();
            $('.tab_content3').eq(activo.index()).show();
            //console.log(activo.index());
            activo.addClass("active");

        } else {
            alert("Debe elegir más de una version");
            compararTodo();
        }
   

    });
});

    

    function compararTodo() {
        var count = 0;
        $('.tab_content3').each(function () {
            $(this).find('table').each(function () {
                $(this).find('tr').each(function () {
                    $(this).show();
                    $(this).css('background-color', '');
                    $(this).find('td').css('color', 'black');
                    $(this).find('td').each(function (index, value) {
                        $(this).css('background-color', '');
                        $(this).show();
                    })
                    if (count == 1) {
                        $(this).css('background-color', '#ededed');
                        count = 0;
                    } else {
                        count++;
                        $(this).css('background-color', 'white');
                    }
                })
            })
        });
    }
h1,h2,h3,h4,h5,h6{clear:both;font-family:latobold;text-transform:uppercase;letter-spacing:1px}
a{color:#fefefe;outline:none;text-decoration:none;border:none;}
ol,ul,li{list-type:none;list-style:none;letter-spacing:1px}


.acordeon .section.precios .acordeon1 .contAcord2{float:left;width:200px;margin-top:1px;margin:auto;}


.acordeon .section.precios .tabs3 {float:left;margin:auto;clear:both;}
.acordeon .section.precios .tabs3 li{float:left;margin:auto;margin-top:1px;padding:20px;}
.acordeon .section.precios .tabs3 li:first-child{margin-top:0}
.acordeon .section.precios .tabs3 li a{background-color:#262626;padding:15px 10px;width:100%;float:left;}
.acordeon .section.precios .tabs3 li a:hover{background-color:#f00}
.acordeon .section.precios .tabs3 li.active a{background-color:#f00}


.acordeon .section.precios .tab_content3{background-color:#ededed;color:#020202;clear:both;}
.acordeon .section.precios .tab_content3 .v-1,.acordeon .section.precios .tab_content3 .v-2,.acordeon .section.precios .tab_content3 .v-3,.acordeon .section.precios .tab_content3 .v-4{width:12%}
.acordeon .section.precios .tab_content3 tr:nth-child(odd){background-color:#fff}
.acordeon .section.precios .tab_content3 tr td{padding:5px 10px;text-align:center;border-left:1px solid #d0d0d0;}
.acordeon .section.precios .tab_content3 tr td:first-child{border-left:none}


.acordeon .section.precios .tab_content2{background-color:#ededed;color:#020202;clear:both;}
.acordeon .section.precios .tab_content2 .v-1,.acordeon .section.precios .tab_content3 .v-2,.acordeon .section.precios .tab_content2 .v-3,.acordeon .section.precios .tab_content3 .v-4{width:12%}
.acordeon .section.precios .tab_content2 tr:nth-child(odd){background-color:#fff}
.acordeon .section.precios .tab_content2 tr td{padding:5px 10px;text-align:center;border-left:1px solid #d0d0d0;}
.acordeon .section.precios .tab_content2 tr td:first-child{border-left:none}
<!DOCTYPE HTML>
<html lang="es-ES">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<section class="ficha">
<div id="fullpage" class="acordeon">
<h3>Precios y especificaciones</h3>

<div id="section" class="section precios">
<div class="contenedor">

<div class="acordeon1">
    <div class="contAcord2">
        <h3><span class="version">Version V1</span></h3>
        <div class="precio">
            $9.950.000
            <span>Iva incl.</span>
        </div>
       <input type="checkbox" name="comparar" value="1">comparar
    </div>
    <div class="contAcord2">
        <h3><span class="version">Version V2</span></h3>
        <div class="precio">
            $9.950.000
            <span>Iva incl.</span>
        </div>
        <input type="checkbox" name="comparar" value="2">comparar
    </div>
</div>
<!-- //acordeon1 -->

<ul class="tabs3">
    <li class="tab compararD"><a href=".tab_content3">Comparar Diferencias</a></li>
</ul>

<!-- tab_content3 -->
<div id="03" class="tab_content3">
    <table id="table3" width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
            <td class='versiones'>Modelos</td>
            <td class='v-1'>V1</td>
        </tr>
        <tr>
            <td class='versiones'>Frenos delanteros</td>
            <td>Discos ventilados</td>
        </tr>
        <tr>
            <td class='versiones'>Frenos traseros</td>
            <td>Discos sólidos</td>
        </tr>
        <tr>
            <td class='versiones'>Airbag piloto</td>
            <td>Si</td>
        </tr>
        <tr>
            <td class='versiones'>Airbag copiloto</td>
            <td class="red">No</td>
        </tr>
        <tr>
            <td class='versiones'>Barras laterales reforzadas de protección en puertas</td>
            <td>Si</td>
        </tr>
        <tr>
            <td class='versiones'>Carrocería con zonas de deformación programada</td>
            <td>Si</td>
        </tr>
        <tr>
            <td class='versiones'>Función de luces "Follow me home"</td>
            <td class="red">No</td>
        </tr>
        <tr>
            <td class='versiones'>Sensores de retroceso</td>
            <td class="red">No</td>
        </tr>
        </tbody>
    </table>

</div>

<br/>
<hr>
<br/>

<!-- tab_content3 -->
<div id="03" class="tab_content2">
    <table id="table2" width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
            <td class='versiones'>Modelos</td>
            <td class='v-2'>V2</td>
        </tr>
        <tr>
            <td class='versiones'>Frenos delanteros</td>
            <td>Discos ventilados</td>
        </tr>
        <tr>
            <td class='versiones'>Frenos traseros</td>
            <td>Discos sólidos</td>
        </tr>
        <tr>
            <td class='versiones'>Airbag piloto</td>
            <td>Si</td>
        </tr>
        <tr>
            <td class='versiones'>Airbag copiloto</td>
            <td class="green">Si</td>
        </tr>
        <tr>
            <td class='versiones'>Barras laterales reforzadas de protección en puertas</td>
            <td>Si</td>
        </tr>
        <tr>
            <td class='versiones'>Carrocería con zonas de deformación programada</td>
            <td>Si</td>
        </tr>
        <tr>
            <td class='versiones'>Función de luces "Follow me home"</td>
            <td class="green">Si</td>
        </tr>
        <tr>
            <td class='versiones'>Sensores de retroceso</td>
            <td class="green">Si</td>
        </tr>
        </tbody>
    </table>

</div>

<!-- tab_content3 -->
</div>
<!-- contenedor -->

</div>
<!-- //PRECIOS Y ESPECIFICACIONES -->

</div>
<!-- //acordeon -->


</section>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- /jQuery -->
<!-- TAB -->
</body>
</html>

1 respuesta 1

0

Esta seria la respuesta de mi pregunta por si a alguien mas le sirve.

$(document).ready(function () {
    $(".tab_content3").hide();
    $("ul.tabs3 li:first").addClass("active").show();
    $(".tab_content3:first").show();
    $("ul.tabs3 li").click(function () {
        $("ul.tabs3 li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content3").hide();

        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        return false;
    });
});

$(document).ready(function () {
    $('.compararD').on('click', function (e) {
        e.preventDefault();
        //Evaluar que existan más de dos versiones para comparar
        if ($('input[name="comparar"]:checkbox:checked').length > 1) {

            //Limpiar antes de eveluar.
            compararTodo();

            //Eliminar columnas que no desean ser comparadas.
            $.each($("input[name='comparar']:checked"), function () {
                var tab = parseInt($(this).val()) + 1;
                $('.tab_content3 table tbody tr td:nth-child(' + tab + ')').show();
            });

            $("input[name='comparar']:checkbox:not(:checked)").each(function () {
                var tab = parseInt($(this).val()) + 1;
                $('.tab_content3 table tbody tr td:nth-child(' + tab + ')').hide();
            });

            //desplegar todas las tablas para poder evaluarlas con el parámetro de columna oculta.
            $('.tab_content3, .tab_content2').show();

            //Colores de los botones para tablas.
            var activo = $('.tabs3').find('.active');
            $('.tabs3').find('li').removeClass("active");

            //Recorrer la primer tabla
            var PrimerTabla = [];
            $('.tab_content3').each(function () {

                //Encontrar tr obviar el primero
                $(this).find('table tr:not(:first-child)').each(function () {

                    //Encontrar TD obviar el primero y no tomar en cuenta las columnas ocultas
                    //Aquí es donde hay que tener cuidado, al principio de este código se ejecuta $('.tab_content3').show();, si esto el código td:visible:not no toma encuenta ninguna columna de esas tablas
                    $(this).find('td:visible:not(:first-child)').each(function (index, value) {

                        //Recorrer los valores y guardarlos en un array
                        PrimerTabla.push($(this).html());
                    });
                });
            });

            // Ejecutar la funcion de la segunda tabla
            SegundaTabla(PrimerTabla);

            //Restaurar tablas y seleccionar la activa.
            $('.tab_content3').hide();
            $('.tab_content3').eq(activo.index()).show();
            //console.log(activo.index());
            activo.addClass("active");

        } else {
            alert("Debe elegir más de una version");
            compararTodo();
        }


    });
});

function SegundaTabla(PrimerTabla) {

    var SegundaTabla = [];

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

            $(this).find('table tr:not(:first-child)').each(function () {

                $(this).find('td:visible:not(:first-child)').each(function (index, value) {
                    SegundaTabla.push($(this).html());
                });
            });
        });

        //Recorrer las dos tablas
        $('.tab_content2,.tab_content3').each(function () {

            //Comparar las dos tablas
            if (PrimerTabla.length > 0) {
                for (var i = 0, l = PrimerTabla.length; i < l; i++) {
                    var check = true;
                    //console.log(PrimerTabla[i] +'=='+ SegundaTabla[i]);
                    if (PrimerTabla[i] !== SegundaTabla[i]) {
                        check = false;
                    }

                    if (check === false) {
                        $(this).find('tr.green' + i).css('background-color', '#DAF7A6');
                        $(this).find('tr.red' + i).css('background-color', '#C70039');
                    } else {}

                }
            }
        });
}

function compararTodo() {
    var count = 0;
    $('.tab_content2,.tab_content3').each(function () {
        $(this).find('table').each(function () {
            $(this).find('tr').each(function () {
                $(this).show();
                $(this).css('background-color', '');
                $(this).find('td').css('color', 'black');
                $(this).find('td').each(function (index, value) {
                    $(this).css('background-color', '');
                    $(this).show();
                });
                if (count == 1) {
                    $(this).css('background-color', '#ededed');
                    count = 0;
                } else {
                    count++;
                    $(this).css('background-color', 'white');
                }
            });
        });
    });
}
h1,h2,h3,h4,h5,h6{clear:both;font-family:latobold;text-transform:uppercase;letter-spacing:1px}
a{color:#fefefe;outline:none;text-decoration:none;border:none;}
ol,ul,li{list-type:none;list-style:none;letter-spacing:1px}


.acordeon .section.precios .acordeon1 .contAcord2{float:left;width:200px;margin-top:1px;margin:auto;}


.acordeon .section.precios .tabs3 {float:left;margin:auto;clear:both;}
.acordeon .section.precios .tabs3 li{float:left;margin:auto;margin-top:1px;padding:20px;}
.acordeon .section.precios .tabs3 li:first-child{margin-top:0}
.acordeon .section.precios .tabs3 li a{background-color:#262626;padding:15px 10px;width:100%;float:left;}
.acordeon .section.precios .tabs3 li a:hover{background-color:#f00}
.acordeon .section.precios .tabs3 li.active a{background-color:#f00}


.acordeon .section.precios .tab_content3{background-color:#ededed;color:#020202;clear:both;}
.acordeon .section.precios .tab_content3 .v-1,.acordeon .section.precios .tab_content3 .v-2,.acordeon .section.precios .tab_content3 .v-3,.acordeon .section.precios .tab_content3 .v-4{width:12%}
.acordeon .section.precios .tab_content3 tr:nth-child(odd){background-color:#fff}
.acordeon .section.precios .tab_content3 tr td{padding:5px 10px;text-align:center;border-left:1px solid #d0d0d0;}
.acordeon .section.precios .tab_content3 tr td:first-child{border-left:none}


.acordeon .section.precios .tab_content2{background-color:#ededed;color:#020202;clear:both;}
.acordeon .section.precios .tab_content2 .v-1,.acordeon .section.precios .tab_content3 .v-2,.acordeon .section.precios .tab_content2 .v-3,.acordeon .section.precios .tab_content3 .v-4{width:12%}
.acordeon .section.precios .tab_content2 tr:nth-child(odd){background-color:#fff}
.acordeon .section.precios .tab_content2 tr td{padding:5px 10px;text-align:center;border-left:1px solid #d0d0d0;}
.acordeon .section.precios .tab_content2 tr td:first-child{border-left:none}
<!DOCTYPE HTML>
<html lang="es-ES">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" media="screen" href="style.css"/>
</head>
<body>
<section class="ficha">
<div id="fullpage" class="acordeon">
<h3>Precios y especificaciones</h3>

<div id="section" class="section precios">
<div class="contenedor">

<div class="acordeon1">
    <div class="contAcord2">
        <h3><span class="version">Version V1</span></h3>
        <div class="precio">
            $9.950.000
            <span>Iva incl.</span>
        </div>
       <input type="checkbox" name="comparar" value="1">comparar
    </div>
    <div class="contAcord2">
        <h3><span class="version">Version V2</span></h3>
        <div class="precio">
            $9.950.000
            <span>Iva incl.</span>
        </div>
        <input type="checkbox" name="comparar" value="2">comparar
    </div>
</div>
<!-- //acordeon1 -->

<ul class="tabs3">
    <li class="tab compararD"><a href=".tab_content3">Comparar Diferencias</a></li>
</ul>

<!-- tab_content3 -->
<div id="03" class="tab_content3">
    <table id="table3" width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
            <td class='versiones'>Modelos</td>
            <td class='v-1'>V1</td>
        </tr>
        <tr class="red0">
            <td class='versiones'>Frenos delanteros</td>
            <td>Discos ventilados</td>
        </tr>
        <tr class="red1">
            <td class='versiones'>Frenos traseros</td>
            <td>Discos sólidos</td>
        </tr>
        <tr  class="red2">
            <td class='versiones'>Airbag piloto</td>
            <td>Si</td>
        </tr>
        <tr class="red3">
            <td class='versiones'>Airbag copiloto</td>
            <td>No</td>
        </tr>
        <tr class="red4">
            <td class='versiones'>Barras laterales reforzadas de protección en puertas</td>
            <td>Si</td>
        </tr>
        <tr class="red5">
            <td class='versiones'>Carrocería con zonas de deformación programada</td>
            <td>Si</td>
        </tr>
        <tr class="red6">
            <td class='versiones'>Función de luces "Follow me home"</td>
            <td>No</td>
        </tr>
        <tr class="red7">
            <td class='versiones'>Sensores de retroceso</td>
            <td>No</td>
        </tr>
        </tbody>
    </table>

</div>

<br/>
<hr>
<br/>

<!-- tab_content3 -->
<div id="03" class="tab_content2">
    <table id="table2" width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
            <td class='versiones'>Modelos</td>
            <td class='v-2'>V2</td>
        </tr>
        <tr class="green0">
            <td class='versiones'>Frenos delanteros</td>
            <td>Discos ventilados</td>
        </tr>
        <tr class="green1">
            <td class='versiones'>Frenos traseros</td>
            <td>Discos sólidos</td>
        </tr>
        <tr class="green2">
            <td class='versiones'>Airbag piloto</td>
            <td>Si</td>
        </tr>
        <tr class="green3">
            <td class='versiones'>Airbag copiloto</td>
            <td>Si</td>
        </tr>
        <tr class="green4">
            <td class='versiones'>Barras laterales reforzadas de protección en puertas</td>
            <td>Si</td>
        </tr>
        <tr class="green5">
            <td class='versiones'>Carrocería con zonas de deformación programada</td>
            <td>Si</td>
        </tr>
        <tr class="green6">
            <td class='versiones'>Función de luces "Follow me home"</td>
            <td>Si</td>
        </tr>
        <tr class="green7">
            <td class='versiones'>Sensores de retroceso</td>
            <td>Si</td>
        </tr>
        </tbody>
    </table>

</div>

<!-- tab_content3 -->
</div>
<!-- contenedor -->

</div>
<!-- //PRECIOS Y ESPECIFICACIONES -->

</div>
<!-- //acordeon -->


</section>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="Comparar.js"></script>
<!-- /jQuery -->
<!-- TAB -->
</body>
</html>

1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 8 jun. 2022 a las 21:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.