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?
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");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.
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>