Estoy trabajando en un proyecto Django. donde mi requisito es si una tabla tiene todos los datos, entonces al hacer clic en el botón debería recibir una alerta de que esa tabla tiene datos. codigo para la mesa
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } <body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <h2>HTML Table</h2> <div class="container" style=" margin-left: 68%;"> <a href="# id="assignbtn" class="btn btn-outline-primary btn-sm" role="button"><i class="fas fa-user-plus"></i> Assign Status </a> </div> <table> <tr> <th>Robot</th> <th>Short Desc</th> <th>Status</th> </tr> <tr> <td>Demo1</td> <td>Maria Anders</td> <td>Available</td> </tr> <tr> <td>Demo2</td> <td>Francisco Chang</td> <td>Available</td> </tr> <tr> <td>Demo3</td> <td>Roland Mendel</td> <td>Not-Available</td> </tr> <tr> <td>Demo4</td> <td>Helen Bennett</td> <td>Running</td> </tr> </table> </body>en esta tabla en la columna Estado tiene un valor como Disponible, No disponible, En ejecución, entonces necesito una alerta como si todos los estados se asignaran al hacer clic en el botón Asignar estado . Pero si en la columna de estado hay un valor como Nulo, Ninguno o negro, entonces no se necesita una alerta. ¿Cómo lograr eso?
Hay muchas formas en que puede lograr lo que desea y la siguiente es solo una de ellas.
Agregué una clase .status para cada columna de estado para luego obtener cada elemento con esa clase y verificar si coinciden con alguna de las cadenas en la matriz statusOptions .
const statusOptions = ["None"]; var btn = document.getElementById("assignbtn"); btn.onclick = function() { var fireAlert = true; var statuses = document.querySelectorAll(".status"); statuses.forEach(function(elem) { if (!elem.innerText || statusOptions.includes(elem.innerText)) { fireAlert = false; } }); if (fireAlert) { alert(' All the status are assigned'); } }; table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } <body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <h2>HTML Table</h2> <div class="container" style=" margin-left: 68%;"> <a href="#" id="assignbtn" class="btn btn-outline-primary btn-sm" role="button"><i class="fas fa-user-plus"></i> Assign Status </a> </div> <table> <tr> <th>Robot</th> <th>Short Desc</th> <th>Status</th> </tr> <tr> <td>Demo1</td> <td>Maria Anders</td> <td class="status">Available</td> </tr> <tr> <td>Demo2</td> <td>Francisco Chang</td> <td class="status">Available</td> </tr> <tr> <td>Demo3</td> <td>Roland Mendel</td> <td class="status">Not-Available</td> </tr> <tr> <td>Demo4</td> <td>Helen Bennett</td> <td class="status">Running</td> </tr> </table> </body>