We Keep Coding

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

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.
<div class="container-sm border mb-4">
<div class="table-responsive">
<div class="form-group">
<h3 class="mt-3" style="text-align: center; ">User Complaints</h3>
</div>
<table id="table" class="table">
<thead class="thead-light">
<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>
<?php
$con = mysqli_connect("localhost","***","","***");
$sql = "SELECT * FROM comp ORDER BY complaint_id DESC Limit 1 ";
$result = $con -> query($sql);
if($result-> num_rows > 0 ){
while ($row = $result -> fetch_assoc()){
?>
<tr>
<th><label for="">SNMP Settings</label></th>
<td>
<?php echo $row['snmpip']; ?>
</td>
<td>
<?php echo $row['snmpremark']; ?>
</td>
</tr>
<tr>
<th><label for="">IP Settings</label></th>
<td>
<?php echo $row['ipip']; ?>
</td>
<td>
<?php echo $row['ipremark']; ?>
</td>
</tr>
<tr>
<th><label for="">Antivirus Settings</label></th>
<td>
<?php echo $row['antiip']; ?>
</td>
<td>
<?php echo $row['antiremark']; ?>
</td>
</tr>
<tr>
<th><label for="">BTS Settings</label></th>
<td>
<?php echo $row['btsip']; ?>
</td>
<td>
<?php echo $row['btsremark']; ?>
</td>
</tr>
<tr>
<th><label for="">BOOST Settings</label></th>
<td>
<?php echo $row['boostip']; ?>
</td>
<td>
<?php echo $row['boostremark']; ?>
</td>
</tr>
<?php } }?>
</tbody>
</table>
</div>
</div>

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" class="table">
<thead class="thead-light">
<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>

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" class="table">
<thead class="thead-light">
<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" class="table">
<thead class="thead-light">
<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>

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" class="table" >
<thead class="thead-light">
<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 class="head"><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>

Calculate sum of multiple nested rows jQuery

My table has nested rows in which the first rows should have the sum of the values of their children.
How can I insert the sum of months into their respective quarters, and also insert the sum of the quarters into their respective years?
Here's a jsfiddle with the expected result and what I have tried.
Here's another jsfiddle with an attempt to solve this using classes.
$('table thead th').each(function(i) {
i += 1;
calculateColumn(i);
});
function calculateColumn(index) {
var totalColumn = 0;
$('table tr').each(function() {
var num = $('td', this).eq(index).text();
if (!isNaN(num) && num.length !== 0) {
totalColumn += parseInt(num);
}
});
$('table tfoot td').eq(index).html(totalColumn.toString());
}
table {
width: 75%;
}
td {
text-align: center;
}
.year-one {
background-color: lightgray;
}
.font-bold {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th></th>
<th>Column A</th>
<th>Expected Result</th>
</tr>
</thead>
<tbody>
<tr class="year-one font-bold">
<td>2022</td>
<td></td>
<td>12</td>
</tr>
<tr class="year-one">
<td>Total Q1</td>
<td></td>
<td>3</td>
</tr>
<tr class="year-one">
<td>Jan</td>
<td>2</td>
<td></td>
</tr>
<tr class="year-one">
<td>Mar</td>
<td>1</td>
<td></td>
</tr>
<tr class="year-one">
<td>Total Q2</td>
<td></td>
<td>9</td>
</tr>
<tr class="year-one">
<td>May</td>
<td>9</td>
<td></td>
</tr>
<tr class="font-bold">
<td>2021</td>
<td></td>
<td>15</td>
</tr>
<tr>
<td>Total Q1</td>
<td></td>
<td>8</td>
</tr>
<tr>
<td>Jan</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Mar</td>
<td>6</td>
<td></td>
</tr>
<tr>
<td>Total Q2</td>
<td></td>
<td>7</td>
</tr>
<tr>
<td>May</td>
<td>7</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr class="font-bold">
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>

Here is a working version
I rely on Total Q in the first column, but a class might be safer like I did with year
$('table thead th').each(function(i) {
i += 1;
calculateColumn(i);
});
function calculateColumn(index) {
var totalColumn = 0;
let totalCell;
let yearCell;
$('table tr').each(function(i) {
if($(this).find("td").eq(0).hasClass('year')) yearCell = $(this).find("td").eq(index);
if($(this).find("td").eq(0).text().includes("Total Q")) totalCell = $(this).find("td").eq(index);
var num = $('td', this).eq(index).text();
if (!isNaN(num) && num.length !== 0) {
num = +num;
yearCell.text(+yearCell.text() + num)
totalCell.text(+totalCell.text() + num)
totalColumn += num;
}
});
$('table tfoot td').eq(index).html(totalColumn);
}
table {
width: 75%;
}
td {
text-align: center;
}
.year-one {
background-color: lightgray;
}
.font-bold {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th></th>
<th>Column A</th>
<th>Column B</th>
</tr>
</thead>
<tbody>
<tr class="year-one font-bold">
<td class="year">2022</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>Total Q1</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>Jan</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="year-one">
<td>Mar</td>
<td>1</td>
<td>4</td>
</tr>
<tr class="year-one">
<td>Total Q2</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>May</td>
<td>9</td>
<td>11</td>
</tr>
<tr class="font-bold">
<td class="year">2021</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Total Q1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Jan</td>
<td>2</td>
<td>6</td>
</tr>
<tr>
<td>Mar</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>Total Q2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>May</td>
<td>7</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr class="font-bold">
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>

How to prevent clicking on header column

How to prevent click event in a header column.
HTML:
<table>
<tr>
<th class="column">Header</th>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>
And my script
$('.column:not("th")').on('click', function(){
alert("test");
});

Why not:
$('td.column').on('click', function(){
alert("test");
});

Add tbody selector on you code
$('tbody .column').on('click', function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="column">thead</th>
</tr>
<tr>
<th class="column">thead Body 1</th>
</tr>
<tr>
<th class="column">thead Body 2</th>
</tr>
<tr>
<th class="column">thead Body 3</th>
</tr>
</thead>
<tr>
<td class="column">Header</td>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>

Get the running balance of several tables with JQuery

I have several tables with the same structure. It has different values for the price. I want to get the running balance of the price column. So I want to get the sum and print each iteration in the running balance column. For example. In the Price column I have 400, 425 and 350 so in the running balance column, I should have 400, 825, 1175. Currently, I'm only getting the sum.
Here is my html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
here is my javascript
$('.runningBal').each(function() {
var sum = 0;
$(this).parents('table').find('.price').each(function() {
var floted = parseFloat($(this).text());
if (!isNaN(floted)) sum += floted;
$('.runningBal').html(sum);
})
//$(this).html(sum);
});
Here is the fiddle

Well people in the comments are right to say that if the product prices are constant, you should render it server-side while you loop.
Anyway, this will do the job :
$("table").each(function() {
var sum = 0;
$(this).find(".runningBal").each(function() {
sum += +$(this).prev(".price").text();
$(this).text(sum);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>

JSON formattation of an HTML table

I'm using lightswitch's script to get an HTML table codified into JSON string (https://github.com/lightswitch05/table-to-json). The problem is that, when i alert the result string (with JSON.stringify(data)), the JSON records start from the 13th column, and then goes on til the end, and continues then from the 1st column to the 12th. I don't understand why, this script appears to work properly on every table, but not on mine:
<div contenteditable>
<table id="input">
<tr id="start">
<th contenteditable="false">00</th>
<th contenteditable="false">00</th>
<th contenteditable="false">00</th>
<th contenteditable="false">01</th>
<th contenteditable="false">02</th>
<th contenteditable="false">03</th>
<th contenteditable="false">04</th>
<th contenteditable="false">05</th>
<th contenteditable="false">06</th>
<th contenteditable="false">07</th>
<th contenteditable="false">08</th>
<th contenteditable="false">09</th>
<th contenteditable="false">10</th>
<th contenteditable="false">11</th>
<th contenteditable="false">12</th>
<th contenteditable="false">13</th>
<th contenteditable="false">14</th>
<th contenteditable="false">15</th>
<th contenteditable="false">16</th>
<th contenteditable="false">17</th>
<th contenteditable="false">18</th>
<th contenteditable="false">19</th>
<th contenteditable="false">20</th>
<th contenteditable="false">21</th>
<th contenteditable="false">22</th>
<th contenteditable="false">23</th>
<th contenteditable="false">24</th>
<th contenteditable="false">25</th>
<th contenteditable="false">26</th>
<th contenteditable="false">27</th>
<th contenteditable="false">28</th>
<th contenteditable="false">29</th>
<th contenteditable="false">30</th>
<th contenteditable="false">31</th>
<th contenteditable="false">32</th>
<th contenteditable="false">33</th>
<th contenteditable="false">34</th>
<th contenteditable="false">35</th>
<th contenteditable="false">36</th>
<th contenteditable="false">37</th>
<th contenteditable="false">38</th>
<th contenteditable="false">39</th>
<th contenteditable="false">40</th>
<th contenteditable="false">41</th>
<th contenteditable="false">42</th>
<th contenteditable="false">43</th>
<th contenteditable="false">44</th>
<th contenteditable="false">45</th>
<th contenteditable="false">46</th>
<th contenteditable="false">47</th>
<th contenteditable="false">48</th>
<th contenteditable="false">49</th>
<th contenteditable="false">50</th>
<th contenteditable="false">51</th>
<th contenteditable="false">52</th>
</tr>
<tr>
<td contenteditable="false">2nd row</td>
<td contenteditable="false">false data</td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td>8</td>
<td></td>
<td>7</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>6</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td>8</td>
<td></td>
<td>8</td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td>8</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
and so on for all the other rows.
I need to save this table in JSON format in order to store the JSON on a database and save modified data. Then also, how to get back the table from JSON?

You are using JSON.stringify so you need to take following into consideration:
Properties of non-array objects are not guaranteed to be stringified
in any particular order. Do not rely on ordering of properties within
the same object within the stringification.
But is it really a problem? Once you send data to server you can order it anyway you want.

First of all, you need to correctly write HTML (close table and div tags etc.). Then I would suggest you treat HTML as XML and maybe this would be helpful:
Convert XML to JSON (and back) using Javascript