Remove empty rows on table with php - php

I have table:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table-bordered" width="100%">
<tr>
<th>Product</th>
<th>Service</th>
</tr>
<tr>
<td>Product 1</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S13</td>
</tr>
<tr>
<td></td>
<td>S14</td>
</tr>
<tr>
<td>Product 2</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S120</td>
</tr>
</table>
I need: where empty row with product (where product's name is empty) delete this row and move service to up product row and delete current service from up product. Example:
In this table we have product 1. I need remove S11 and paste: S13 and S14 in single row.
I need this table on result:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table-bordered" width="100%">
<tr>
<th>Product</th>
<th>Service</th>
</tr>
<tr>
<td>Product 1</td>
<td>S13, S14</td>
</tr>
<tr>
<td>Product 2</td>
<td>S120</td>
</tr>
</table>
I know how it can do with javascript:
let tr;
$('#test1234 tr').each(function () {
if($(this).find('td:nth-child(1)').text().length){
tr = $(this);
tr.find('td:nth-child(2)').text('')
}else{
let td = $(tr).find('td:nth-child(2)');
let comma = td.text() !== "" ? ", " : '';
td.text(td.text() + comma + $(this).find('td:nth-child(2)').text())
$(this).remove()
}
});
But I need do this with php. How I can do it?
I have this html page on my php variable: $html_body.

generally you can't remove it using php but i will give you suggestion that please use continue statement when your row is blank
for example
$html = "<tbody>";
foreach($data as $row){
if(empty($row['parameter'])){
continue;
}else{
$html .= "<tr> <td></td> </tr>";
}
}
$html .= "</tbody>";

Related

How to follow the condition to underline in the table?

I have a question how to underline in the table according the column data. Below is example coding to explain what I am facing the problem:
I want to detect if column underline is 1 the first name data will draw the underline, if 0 the first name data no show the underline. Below the sample is hardcode, if real situation, I have too many row to show the data, I cannot 1 by 1 to add text-decoration: underline; in the td. So that, hope someone can guide me how to solve this problem. I am using the php code to make the variable to define the underline.
<!--Below the php code I just write the logic, because I don't know how to write to detect the column underline value-->
<?php
if ( <th>Underline</th> == 1) {
$add_underline = "text-decoration: underline;";
}
if ( <th>Underline</th> == 0) {
$add_underline = "text-decoration: underline;";
}
?>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Underline</th>
</tr>
<tr>
<td style="<?php echo $add_underline;?> ">Jill</td>
<td>Smith</td>
<td>1</td>
</tr>
<tr>
<td style="<?php echo $add_underline;?>">Eve</td>
<td>Jackson</td>
<td>0</td>
</tr>
<tr>
<td style="<?php echo $add_underline;?>">John</td>
<td>Doe</td>
<td>1</td>
</tr>
</table>
My output like below the picture:
My expected result like below the picture, Jill and John can underline:
Why not use javascript to achieve this? No matter what the server sends it will evaluate the condition if 1 is set and then underline accordingly... You would have to use classes to get the appropriate table data tags holding the values, I added class='name' to the names <td> tag and class='underline' tot he underline <td> tag.
// get the values of the elements with a class of 'name'
let names = document.getElementsByClassName('name');
// get the values of the elements with a class of 'underline'
let underline = document.getElementsByClassName('underline');
// loop over elements using for and use the keys to get and set values
// `i` will iterate until it reaches the length of the list of elements with class of underline
for(let i = 0; i < underline.length; i++){
// use the key to get the text content and check if 1 is set use Number to change string to number for strict evaluation
if(Number(underline[i].textContent) === 1){
// set values set to 1 to underline in css style
names[i].style.textDecoration = "underline";
}
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Underline</th>
</tr>
<tr>
<td class="name">Jill</td>
<td>Smith</td>
<td class='underline'>1</td>
</tr>
<tr>
<td class="name">Eve</td>
<td>Jackson</td>
<td class='underline'>0</td>
</tr>
<tr>
<td class="name">John</td>
<td>Doe</td>
<td class='underline'>1</td>
</tr>
</table>
Or using the td child values...
let tr = document.querySelectorAll("tr");
last = null;
for(let i = 1; i < tr.length; i++){
if(Number(tr[i].lastElementChild.innerHTML) === 1){
tr[i].firstElementChild.style.textDecoration = "underline";
}
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Underline</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>1</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>0</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>1</td>
</tr>
</table>

Multiply all td values(numbers) from a table with 3.8

My table is here http://jsfiddle.net/wqk7Lauz/
All I need is to have all values from td:nth-of-type(3) multiplied with 3.8 on page load.
HTML
$('td:nth-of-type(3)').text(parseFloat($('td:nth-of-type(3)').text()) * 3.8)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered mydatatable table-hover display responsive nowrap">
<tbody>
<tr>
</tr>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Preço por 1000</th>
<th>Quantidade mínima</th>
<th>Quantidade máxima</th>
<th>Descrição</th>
</tr>
<tr>
<td>9</td>
<td>Product </td>
<td>
R$1.86
</td>
<td>100</td>
<td>10000</td>
<td>S1 </td>
</tr>
<tr>
<td>10</td>
<td>Product </td>
<td>
R$3.98
</td>
<td>1000</td>
<td>100000</td>
<td>S1</td>
</tr>
</tbody>
</table>
You're very close, you just need to use the callback version of text so you're only handling the text of each individual element, and remove the R$ at the beginning:
$('td:nth-of-type(3)').text(function() {
return parseFloat($(this).text().replace("R$", "")) * 3.8;
});
Example:
$('td:nth-of-type(3)').text(function() {
return parseFloat($(this).text().replace("R$", "")) * 3.8;
});
<table class="table table-bordered mydatatable table-hover display responsive nowrap">
<tbody>
<tr>
</tr>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Preço por 1000</th>
<th>Quantidade mínima</th>
<th>Quantidade máxima</th>
<th>Descrição</th>
</tr>
<tr>
<td>9</td>
<td>Product </td>
<td>
R$1.86
</td>
<td>100</td>
<td>10000</td>
<td>S1 </td>
</tr>
<tr>
<td>10</td>
<td>Product </td>
<td>
R$3.98
</td>
<td>1000</td>
<td>100000</td>
<td>S1</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you want to add back the R$, and perhaps limit the result to a specific number of places, you can do that with string concatenation and toFixed:
$('td:nth-of-type(3)').text(function() {
return "R$" + (parseFloat($(this).text().replace("R$", "")) * 3.8).toFixed(2);
});
Example:
$('td:nth-of-type(3)').text(function() {
return "R$" + (parseFloat($(this).text().replace("R$", "")) * 3.8).toFixed(2);
});
<table class="table table-bordered mydatatable table-hover display responsive nowrap">
<tbody>
<tr>
</tr>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Preço por 1000</th>
<th>Quantidade mínima</th>
<th>Quantidade máxima</th>
<th>Descrição</th>
</tr>
<tr>
<td>9</td>
<td>Product </td>
<td>
R$1.86
</td>
<td>100</td>
<td>10000</td>
<td>S1 </td>
</tr>
<tr>
<td>10</td>
<td>Product </td>
<td>
R$3.98
</td>
<td>1000</td>
<td>100000</td>
<td>S1</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Hi change your script function with this
$(".table tr td:nth-child(3)").each(function(){ //Loop
//alert($(this).text())
var thrdtd = $(this).text(); //Getting value of td
onlyno = thrdtd.replace('R$', ''); // Removing R$
//akert(thrdtd);
$(this).text('R$ '+ parseFloat(onlyno * 3.8).toFixed(2)) // Adding R$ and also multiplying at the same time and update that result to td again
});
In this first i am getting value of every third td value through loop
$(".table tr td:nth-child(3)").each(function(){
and then removing character from it before multiplying and then after multiplying i am updating the same td value
You can use the below code:
$('td:nth-of-type(3)').text("R$" + (parseFloat($(this).text().replace("R$", "")) * 3.8).toFixed(2));

how would i remove some portion of <tr><td> from a table in php?

this is my table -
<table>
<tr>
<td>ABC</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
and I want to remove this one table row:
<tr>
<td> </td>
</tr>
my expected output is:
<table>
<tr>
<td>ABC</td>
</tr>
</table>
is it possible??please help me
As you have tagged your question with the tag php i would recommend using a regular expression.
The pattern \s*<tr>\s*<td> <\/td>\s*<\/tr> will find the tr with an empty ( ) td.
To test and look into the regex you can have a look here: https://regex101.com/r/ax6Xdg/1
Put together this will look something like this:
$table = "<table>
<tr>
<td>ABC</td>
</tr>
<tr>
<td> </td>
</tr>
</table>";
$pattern = "/\s*<tr>\s*<td> <\/td>\s*<\/tr>/";
var_dump( preg_replace( $pattern , "" , $table ) );
This will output something very simmilar to this:
string '<table>
<tr>
<td>ABC</td>
</tr>
</table>' (length=60)
You can do this by using JQuery function .remove(). You can look it up here
Edit: If you want to locate that specific tag, you can do that by using .next()read here, .find() read here,.parent()read here, .children read here
Just add id to your table :
<table id="tableid">
<tr>
<td>ABC</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
This script find , if found then remove !
$('#tableid tr').each(function() {
if ($(this).find('td').html()==' ') $(this).remove();
});
If you want to find some text and then remove then replace html() with text()
$('#tableid tr').each(function() {
if ($(this).find('td').text()=='ABC') $(this).remove();
});
You should try this:
<table>
<tr id="abc>
<td>ABC</td>
</tr>
<tr id="remove">
<td> </td>
</tr>
<script>
$('#remove').remove();
</script>
When rendering the table, add a unique class for the rows you wish to delete. Lets say the class is: _rowToDelete, and then using jQuery, remove all the rows that have this class.
In the below example, when you click on the button the rows are being removed, so you can see the changes. But you can do the same on page load if you wish so.
$(function() {
$("#removeBtn").click(function() {
$("._rowToDelete").remove() ;
});
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>ABC 1</td>
</tr>
<tr class="_rowToDelete">
<td> </td>
</tr>
<tr>
<td>ABC 2</td>
</tr>
<tr class="_rowToDelete">
<td> </td>
</tr>
<tr>
<td>ABC 3</td>
</tr>
<tr class="_rowToDelete">
<td> </td>
</tr>
</table>
Remove

How to sum all the column wise values of html table and display the sum in particular column's footer

My html table goes like below, In the footer of my table i want to add the "Total" and sum of all the values at the footer of particular "quarters"
"quarter1" "quarter2" "quarter3" "quarter4"
250000 115000
175000 600000 275000
300000 150000 750000
650000 450000
850000 290000 145000
my view code is like below
How to overcome my issue, please suggest me. Any helps are appreciated,
Thank you
<table class="table table-bordered" id="referListTable">
<thead>
<tr>
<th>SI.No</th>
<th>Jan-Mar</th>
<th>Apr-Jun</th>
<th>Jul-Sep</th>
<th>Oct-Dec</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
foreach($dashboardDetails as $llist){
?>
<tr>
<td><?php echo $i; ?></td>
<td align="right">$llist['previous']; ?></td>
<td align="right">$llist['quarter1'];?></td>
<td align="right">$llist['quarter2'];?></td>
<td align="right">$llist['quarter3'];?></td>
<td align="right">$llist['quarter4'];?></td>
</tr>
<?php
$i++;
}
?>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td id="total" ></td>
<td id="total" ></td>
<td id="total" ></td>
<td id="total" ></td>
<td id="total" ></td>
</tr>
</tfoot>
</table>
Try something like this
var sums = []
$("table tbody tr").each(function() {
$(this).find("td").each(function(i, x) {
if ($(x).html().length) {
var tdValue = parseInt($(x).html());
tdValue = (tdValue + parseInt(sums[i] == undefined ? 0 : sums[i]))
sums[i] = tdValue
}
})
})
$.each(sums,function(i,x) {
$("tfoot tr").append("<td>"+x+"</td>")
})
Note this is created before we had your html code in the question, but it should be able to give you an idea how to make it work with your own html code
var sums = []
$("table tbody tr").each(function() {
$(this).find("td").each(function(i, x) {
if ($(x).html().length) {
var tdValue = parseInt($(x).html());
tdValue = (tdValue + parseInt(sums[i] == undefined ? 0 : sums[i]))
sums[i] = tdValue
}
})
})
$.each(sums,function(i,x) {
$("tfoot tr").append("<td>"+x+"</td>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>quarter1</td>
<td>quarter2</td>
<td>quarter3</td>
<td>quarter4</td>
</tr>
</thead>
<tbody>
<tr>
<td>250000</td>
<td>115000</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>175000</td>
<td>600000</td>
<td>275000</td>
</tr>
<tr>
<td>300000</td>
<td>150000</td>
<td>750000</td>
<td></td>
</tr>
<tr>
<td>650000</td>
<td></td>
<td></td>
<td>450000</td>
</tr>
<tr>
<td>850000</td>
<td>290000</td>
<td>145000</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>

How to sum values for multiple table column based on class or id [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have number of table in one page .
I want to calculate sum of all price column from all different tables & want to display that sum value as Grand total.
For example:- I have page like: Item you purchased
<!-- table for fruit items -->
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>50</td>
</tr>
<tr>
<td>Banana</td>
<td>40</td>
</tr>
</table>
<!-- table for cloth items -->
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Tshirt</td>
<td>500</td>
</tr>
<tr>
<td>Jeans</td>
<td>600</td>
</tr>
</table>
.
.
.
<!--multiple tables for different categories -->
.
.
.
<!-- table for home items -->
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>TV</td>
<td>5000</td>
</tr>
</table>
<!-- Grand total of all item price for all tables-->
<div>
<label>Grand Total:</label>
<div>6190</div>
</div>
declare the variable in above table.
<?php $grand_total = 0 ?>
<!-- table for fruit items -->
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td><?php $grand_total+= 50 ?> 50</td>
</tr>
<tr>
<td>Banana</td>
<td><?php $grand_total+= 40 ?>40</td>
</tr>
</table>
<!-- table for cloth items -->
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Tshirt</td>
<td><?php $grand_total+= 500 ?> 500</td>
</tr>
<tr>
<td>Jeans</td>
<td><?php $grand_total+= 600 ?> 600</td>
</tr>
</table>
.
<!--multiple tables for different categories -->
<!-- table for home items -->
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>TV</td>
<td><?php $grand_total+= 5000 ?> 5000</td>
</tr>
</table>
<div>
<label>Grand Total:</label>
<div><?php echo $grand_total ?></div>
</div>
Before your <table> tag, create a variable in PHP (initially set to 0) and increment it by each value in the Price column.
Your code would look like this:
<?php $total = 0; ?>
<!-- table for fruit items -->
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>50</td>
<?php $total += 50; ?>
</tr>
<tr>
<td>Banana</td>
<td>40</td>
<?php $total += 40; ?>
</tr>
</table>
<!-- table for cloth items -->
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Tshirt</td>
<td>500</td>
<?php $total += 500;?>
</tr>
<tr>
<td>Jeans</td>
<td>600</td>
<?php $total += 600; ?>
</tr>
</table>
.
.
.
<!--multiple tables for different categories -->
.
.
.
<!-- table for home items -->
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>TV</td>
<td>5000</td>
<?php $total += 5000; ?>
</tr>
</table>
<!-- Grand total of all item price for all tables-->
<div>
<label>Grand Total:</label>
<div>$<?php echo $total;?></div>
</div>
You can also look into PHP functions such as number_format to better format the total value.
Give individual classNames to field names.
For example:
<td class="banana">50</td>
Then you have to write something like this in JavaScript.
var bananaArray = document.getElementsByClassName("banana");
var bananaSum = 0;
for(var i=0; i<bananaArray.length; i++)
{
$bananaSum +=bananaArray[i].innerHtml or bananaArray[i].value;
}
Then create additional row for sum and append it to table.
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = "Sum";
var td2 = document.createElement("td");
td2.innerHTML = bananaSum; //this is bananaSum variable from for loop
tr.appendChild(td1);
tr.appendChild(td2);
Then get your table id and append this row to it:
var table = document.getElementById("tableId)";
table.appendChild(tr);
That's all :)

Categories