Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

801
Vistas
jQuery dataTables row.add con diferentes clases en td externo según el contenido

Quiero agregar entradas a una tabla de datos jQuery con row.add y al agregar (o luego, si no es posible al agregar) cambiar la clase del <td> externo según el contenido. Los valores > 5 deberían obtener la clase color-green , los valores por debajo de 5 color-red

 var mTableROH = $('.mm-table.ROH').DataTable( { dom: 'Bfrtip', "stateSave": true, } ); for(let i = 0; i < 10; i++) { mTableROH.row.add( [ (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), ] ); } mTableROH.columns.adjust().draw();
 .color-red{ color: red; } color-green{ color: green; }
 <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"> <table id="mm-table-roh" class="table table-striped table-bordered mm-table ROH"> <thead> <tr> <th>Value 1</th> <th>Value 2</th> <th>Value 3</th> <th>Value 4</th> <th>Value 5</th> <th>Value 6</th> <th>Value 7</th> <th>Value 8</th> </tr> </thead> <tbody> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

¿Cómo agregar esas clases al agregar nuevas filas como esta?

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Entonces, después de leer su comentario, investigué más y creo que esto es mejor, ya que creo que le preocupa el rendimiento:

 var mTableROH = $('.mm-table.ROH').DataTable({ dom: 'Bfrtip', "stateSave": true, "createdRow": function(row, data, dataIndex) { // add a callback function const length = row.children.length; for (let i = 0; i < length; i++) { row.children[i].className = data[i] > 5 ? "color-green" : "color-red"; } } }); // Below remains the same as my previous answer for (let i = 0; i < 10; i++) { let randomNumbers = []; for (let j = 0; j < 8; j++) { randomNumbers.push((Math.random() * 10).toFixed(2)); } mTableROH.row.add(randomNumbers) } mTableROH.columns.adjust().draw();

Básicamente, solo podemos agregar una propiedad createdRow ( https://datatables.net/reference/option/createdRow ) dentro del argumento del objeto de .DataTable() que se ejecuta cuando a TR element is created (and all TD child elements have been inserted)

También otro cambio es que esta vez está reemplazando todas las clases de los elementos td en lugar de agregar una clase, si solo desea agregar la clase, puede reemplazar

 row.children[i].className = data[i] > 5 ? "color-green" : "color-red";

con

 row.children[i].classList.add(data[i] > 5 ? "color-green" : "color-red");
about 4 years ago · Juan Pablo Isaza Denunciar

0

Mientras estoy en esto, déjame ayudarte a simplificar tu bucle for para que no tengas que repetir (Math.random() * 10).toFixed(2) 8 veces

 for (let i = 0; i < 10; i++) { let randomNumbers = []; for (let j = 0; j < 8; j++) { randomNumbers.push((Math.random() * 10).toFixed(2)); } mTableROH.row.add(randomNumbers) } mTableROH.columns.adjust().draw();

Inmediatamente después del código anterior, puede escribir esto, esto agrega la clase después de agregar las celdas de la tabla:

 $(".mm-table.ROH tbody td").each(function() { const value = parseFloat($(this).text()); $(this).addClass(value > 5 ? "color-green" : "color-red"); });

Lo que hace es usar el selector jQuery, podemos recuperar todos los elementos td dentro del tbody del elemento con la clase .mm-table.ROH , y usando la función .each(), pasamos una función que se ejecuta para cada td elemento. Así que recuperamos el valor de la propiedad .text() de $(this) (que se refiere al elemento td actual), y luego agregamos la clase correspondiente en función de si el valor es mayor que 5 o no.

about 4 years ago · Juan Pablo Isaza Denunciar

0

Entonces, aquí hay un enfoque sobre cómo abordar su problema. Obtenga todas sus celdas con document.querySelectorAll y luego debe hacer un método forEach para obtener el HTML interno de cada celda. Por lo tanto, esto le permitirá obtener la cadena y, a partir de ahí, puede hacer un método parseFloat() para obtener el valor numérico real de la celda. Por último, puede hacer una declaración condicional que verifique si el valor está por debajo o por encima de 5. Si es así, asigne la clase con classList.add() dentro de cada celda que necesite. Salud

 var mTableROH = $('.mm-table.ROH').DataTable({ dom: 'Bfrtip', "stateSave": true, "createdRow": function(row, data, dataIndex) { // add a callback function const length = row.children.length; for (let i = 0; i < length; i++) { (data[i] > 5) ? row.children[i].classList.add("color-green") : row.children[i].classList.add("color-red"); } } }); for (let i = 0; i < 10; i++) { mTableROH.row.add( [ (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), (Math.random() * 10).toFixed(2), ]).draw() .nodes() .to$() .addClass('row'); } mTableROH.columns.adjust().draw();
 .color-red { color: red; } .color-green { color: green; }
 <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"> <table id="mm-table-roh" class="table table-striped table-bordered mm-table ROH"> <thead> <tr> <th>Value 1</th> <th>Value 2</th> <th>Value 3</th> <th>Value 4</th> <th>Value 5</th> <th>Value 6</th> <th>Value 7</th> <th>Value 8</th> </tr> </thead> <tbody> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda