How to hide whole row if some cells are empty in php and mysql-CodePudding

I want to hide an entire row if some of the cells are null. I have tried various method using CSS and JS but none of it is working.

The first column is filled but the other two columns in a row are blank or data will be fetched from mySQL if user inputs the data.

Even if first column is filled entire row should hide if no data is there in other cells in a row.

<table id="mytable" width="500" >
  <thead >
    <tr>
      <th scope="col" width="300px"> Complaint Type</th>
      <th scope="col" width="400px"> Username / IP</th>
      <th scope="col"> Remark</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><label for="">SNMP Settings</label></th>
      <td name="tdTable">Hello </td>
      <td name="tdTable"> World</td>
    </tr>
    <tr>
      <th><label for="">IP Settings</label></th>
      <td name="tdTable"></td>
      <td name="tdTable"></td>
    </tr>
    <tr>
      <th><label for="">Antivirus Settings</label></th>
      <td> </td>
      <td></td>
    </tr>
    <tr>
      <th>Trial</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Trail 2</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

CodePudding user response：

You can do this very simply with some basic javascript. Find all table-cell elements using querySelectorAll - from which you know the parent is the table-row. If the table-cell is empty ( or other criteria ) manipulate the parent - hide it in this case.

document.querySelectorAll('td').forEach( td=>{
  let tr=td.parentNode;
  if( td.textContent=='' )tr.style.display='none'
})

<table id="mytable" width="500" >
  <thead >
    <tr>
      <th scope="col" width="300px"> Complaint Type</th>
      <th scope="col" width="400px"> Username / IP</th>
      <th scope="col"> Remark</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><label for="">SNMP Settings</label></th>
      <td name="tdTable">Hello </td>
      <td name="tdTable"> World</td>
    </tr>
    <tr>
      <th><label for="">IP Settings</label></th>
      <td name="tdTable"></td>
      <td name="tdTable"></td>
    </tr>

    <tr>
      <th><label for="">Antivirus Settings</label></th>
      <td> </td>
      <td></td>
    </tr>

    <tr>
      <th>Trial</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
      <th>Trail 2</td>
        <td></td>
        <td></td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Here is my suggestion

Test if the tr is already hidden and if not, hide it if the cell is empty

document.querySelectorAll("#mytable tbody tr td").forEach(td => {
  const tr = td.closest("tr")
  tr.hidden = tr.hidden || td.textContent.trim() ===  "";
})

<table id="mytable" width="500" >
  <thead >
    <tr>
      <th scope="col" width="300px"> Complaint Type</th>
      <th scope="col" width="400px"> Username / IP</th>
      <th scope="col"> Remark</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><label for="">SNMP Settings</label></th>
      <td name="tdTable">Hello </td>
      <td name="tdTable"> World</td>
    </tr>
    <tr>
      <th><label for="">IP Settings</label></th>
      <td name="tdTable"></td>
      <td name="tdTable"></td>
    </tr>
    <tr>
      <th><label for="">Antivirus Settings</label></th>
      <td> </td>
      <td></td>
    </tr>
    <tr>
      <th>Trial</th>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Trail 2</th>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Same in jQuery

$("#mytable tbody tr td").each(function() {
  const $tr = $(this).closest("tr")
  const emptyCells = $tr.find("td").filter(function() { return $(this).text().trim() === ""; }).length > 0;
  $tr.toggle(!emptyCells)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table id="mytable" width="500" >
  <thead >
    <tr>
      <th scope="col" width="300px"> Complaint Type</th>
      <th scope="col" width="400px"> Username / IP</th>
      <th scope="col"> Remark</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><label for="">SNMP Settings</label></th>
      <td name="tdTable">Hello </td>
      <td name="tdTable"> World</td>
    </tr>
    <tr>
      <th><label for="">IP Settings</label></th>
      <td name="tdTable"></td>
      <td name="tdTable"></td>
    </tr>
    <tr>
      <th><label for="">Antivirus Settings</label></th>
      <td> </td>
      <td></td>
    </tr>
    <tr>
      <th>Trial</th>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Trail 2</th>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

CodePudding user response：

This is what you are looking for using jQuery:

$('tr').each(function(){
            var _hide = false;
            $(this).find('td').each(function(){
                if($(this).text().trim() == ''){
                    _hide = true;
                }
            });
            if(_hide){
                $(this).hide();
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table id="mytable" width="500"  >
        <thead >
        <tr>
            <th scope="col" width="300px"> Complaint Type</th>
            <th scope="col" width="400px"> Username / IP</th>
            <th scope="col"> Remark</th>
        </tr>
        </thead>
        <tbody >
        <tr>
            <th ><label for="">SNMP Settings</label></th>
            <td name="tdTable">Hello </td>
            <td name="tdTable"> World</td>
        </tr>
        <tr>
            <th ><label for="">IP Settings</label></th>
            <td name="tdTable"></td>
            <td name="tdTable"></td>
        </tr>
        <tr>
            <th><label for="">Antivirus Settings</label></th>
            <td> </td>
            <td></td>
        </tr>
        <tr>
            <th>Trial</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Trail 2</td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>