How to get popup when my table has data instead blank or None?-CodePudding

I'm working on a django project. where my requirement is if a table has all the data then on button click i should get a alert that that table has data. code for the table

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>

in this table in the column Status has value like Available, Not-Available, Running then I need a alert like all the status are assigned on click of assign status button. But if in the status column there's value like Null, None or black then there no alert needed. How to achieve that?

CodePudding user response：

There's many ways you can accomplish what you want and the below is just one of them.

I added a class .status for each status column to then get every element with that class and check if they match any of the string in array 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>