I have a table like this:
<table>
<tr>
<td>100</td>
</tr><br>
<tr>
<td>200</td>
</tr><br>
<tr>
<td>300</td>
</tr><br>
<tr>
<td>400</td>
</tr><br>
<tr>
<td>500</td>
</tr><br>
<tr>
<td>600</td>
</tr><br><br>
<tr>
<td>Total: </td>
<td>2100</td>
</tr>
</table>
I want to count and display the total of the column as shown above using PHP but I am not sure how to make this possible. Please help.
You could easily do this with javascript document.getElementById("idHere").value and stock the sum of them in a single variable.
The bad part is that you should give every td an Id.
In PHP you should give them name attribute, add a submit button and get the values from the global-variable $_POST["nameOfTD"];
You can use buffer to read the content of the page then parse html:
<?php
ob_start();
?><table>
<tr>
<td class="foo">100</td>
</tr><br>
<tr>
<td class="foo">200</td>
</tr><br>
<tr>
<td>300</td>
</tr><br>
<tr>
<td>400</td>
</tr><br>
<tr>
<td>500</td>
</tr><br>
<tr>
<td>600</td>
</tr><br><br>
<tr>
<td>Total: </td>
<?php
$DOM = new DOMDocument;
$DOM->loadHTML(ob_get_contents());
$items = $DOM->getElementsByTagName('td');
function getClass($item) {
foreach ($item->attributes as $name => $attrNode) {
if ($name == 'class') {
return $attrNode->nodeValue;
}
}
}
$sum = 0;
for ($i = 0; $i < $items->length; $i++) {
$item = $items->item($i);
if (getClass($item) == 'foo') {
$sum += intval($item->nodeValue);
}
}
echo "<td>" . $sum . "</td>";
?>
</tr>
</table>
<?php
ob_end_flush();
?>
Related
I have code like this
<table id='data-table'>
<thead>
<tr>
<th>No</th>
<th>Name Items</th>
<th>Qty</th>
<th>Price</th>
<th>Action</th>
<th>Check</th>
</tr>
</thead>
<tbody>
<php foreach($data as $d) : ?>
<tr>
<td><?= $no++ ?></td>
<td><?= $d['name'] ?></td>
<td><?= $d['qty'] ?></td>
<td><?= $d['price'] ?></td>
<td><button type='button' class='btn' name='up'>up</button></td>
<td><input type='checkbox'></td>
</tr>
<php endforeach ?>
</tbody>
</table>
I want when click button, that qty update data and checkbox if that check then uncheck, I'm use jquery like this but i don't know how can i uncheckbox when button click.
Thank you in advance
$('#data-table tbody').on('click', '.btn[name="up"]', function() {
const row = $(this).closest('tr')[0];
const qty = Number(row.cells[2].innerHTML);
const tqty = qty + 1;
row.cells[2].innerHTML = tqty;
});
You should use jQuery all the way or not at all
Also you are missing <tr></tr>
$('#data-table tbody').on('click', '.btn[name="up"]', function() {
const $row = $(this).closest('tr');
const $cells = $row.find("td");
const $qtyCell = $cells.eq(2);
const qty = +$qtyCell.text()
$qtyCell.text(qty + 1);
$cells.eq(5).find("[type=checkbox]").prop("checked",false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table id='data-table'>
<thead>
<tr>
<th>No</th>
<th>Name Items</th>
<th>Qty</th>
<th>Price</th>
<th>Action</th>
<th>Check</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name 1</td>
<td>5</td>
<td>2.00</td>
<td><button type='button' class='btn' name='up'>up</button></td>
<td><input type='checkbox'></td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>8</td>
<td>4.00</td>
<td><button type='button' class='btn' name='up'>up</button></td>
<td><input type='checkbox'></td>
</tr>
</tbody>
</table>
I have a html table Image table, and I would like to populate or fill the html table using data from database(mysql). This is the data from my database Image Data. I can not think of anything to put the data into my html table per supplier name. Do you guys know how to do this? Using any of the languages such as PHP, JavaScript.
This is my actual table Actual Image. I already tried it myself but I only get the supplier name. This is the my code to get the supplier name. This should be the expected output Output Image
<thead>
<tr id="tr-1">
<th><th><th><th><th></th></th></th></th></th>
<?php $i = 1; foreach ($supp_name as $key => $value) { ?>
<th colspan="2" class="supplier_name_class"><input type="text" class="supplier_name" placeholder="Supplier Name" id="supplier_name-1" value="<?php echo $value->supplier_name; ?>" style="width: 300px; text-align: center;"></th>
<?php $i++; } ?>
</tr>
<tr id="tr-2">
<th>LN</th>
<th>PR No</th>
<th>Description</th>
<th>Qty</th>
<th>Unit</th>
<?php $i = 1; foreach ($supp_name as $key => $value) { ?>
<th>Price</th>
<th>Total</th>
<?php $i++; } ?>
</tr>
</thead>
<tbody>
<?php $i = 1; foreach ($supp_dtl as $key => $value) { ?>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
I saw this question. In my particular case, I have Machines in different Rooms. So let's say my table contains columns: room, machine, etc. One room may contain many machines.
I need to change the row color when the room_name changes.
I tried this but it did not work.
var tbl = document.getElementById("tblMain");
if (tbl != null) {
if (tbl.rows[0] != null) {
var room = document.getElementById("tblMain").rows[1].cells[0].innerHTML;
tbl.rows[0].style.backgroundColor = "#f1fafa";
}
for (var i = 1; i < tbl.rows.length; i++) {
if (room == document.getElementById("tblMain").rows[i].cells[0].innerHTML;)
tbl.rows[i].style.backgroundColor = "#f1fafa";
}
room = document.getElementById("tblMain").rows[i].cells[0].innerHTML;
}
<table class="hoverTable dataTable" id="tblMain">
<thead>
<tr>
<th>Room</th>
<th>Machine</th>
<th>Serial Number</th>
</tr>
</thead>
<tbody>
<?php foreach ($assignations as $assignation): ?>
<tr>
<td>
<?= $assignation->has('room') ? $assignation->room->name : '-' ?>
</td>
<td>
<?= $assignation->has('machine') ? $assignation->machine->name : '' ?>
</td>
<td>
<?= $assignation->has('machine') ? $assignation->machine->serial_number : '' ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Here is an example of the output I need:
<table border="1" cellpadding="4" cellspacing="4">
<tr>
<td>room 1</td>
<td>machine 1</td>
</tr>
<tr bgcolor="#FF0000">
<td>room 2</td>
<td>machine 2</td>
</tr>
<tr bgcolor="#FF0000">
<td>room 2</td>
<td>machine 3</td>
</tr>
<tr>
<td>room 4</td>
<td>machine 4</td>
</tr>
<tr bgcolor="#FF0000">
<td>room 7</td>
<td>machine 5</td>
</tr>
</table>
I have a problem, I need to show / hide a colspan of each column when a link is clicked.
That is to say, I have many records, and when you click on any specific, need to show this information on a colspan, when another record is clicked hide the record previously clicked.
My HTML code:
<table class="table table-condensed table-bordered table-hover text-center">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Date</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<?php foreach ($products as $row): ?>
<tr>
<td>1</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td colspan="5">Details of selected product</td>
</tr>
<?php endforeach; ?>
<tbody>
</table>
I had this code, but always brought me the first record:
$('.show').click(function(){
$(this).parent().parent().next().toggle('slow');
var id = $(this).attr('id');
$('td #colspanid').append(id); //show id
return false;
});
If you want specific row to toggle then you can use eq
jQuery(document).ready(function($){
$('.show').on('click', function(e){
e.preventDefault();
// Put row index in eq
$('.table tr').eq(2).toggle();
})
})
Or if you want to toggle next tr then check this jsfiddle that i've created.
Hope it helps you.
Modify the click function like this.
$('.show').click(function(){
var element1=$(this);
$('.previous').addClass('hide');
element1.parent().parent().addClass('previous');
var id = element1.attr('id');
$('td#colspn').text('Details of selected product is :' +id); //show id
return false;
});
and add css:
.hide{
display:none;
}
Play the below html for reference.
$('.show').click(function(){
var element1=$(this);
$('.previous').addClass('hide');
element1.parent().parent().addClass('previous');
var id = element1.attr('id');
$('td#colspn').text('Details of selected product is :' +id); //show id
return false;
});
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table class="table table-condensed table-bordered table-hover text-center">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Date</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>3</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>4</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td id="colspn" colspan="5">Details of selected product</td>
</tr>
<tbody>
</table>
First, identify the details rows by giving them a class.
<tbody>
<?php foreach ($products as $row): ?>
<tr>
<td><?php echo $row[0] ?></td>
<td><?php echo $row[1] ?></td>
<td><?php echo $row[2] ?></td>
<td><?php echo $row[3] ?></td>
<td>Show details</td>
</tr>
<tr class="details"> <!-- <<<<< class="details" -->
<td colspan="5">Details of selected product</td>
</tr>
<?php endforeach; ?>
<tbody>
Then, the jQuery will be as follows :
$(function() {
$("tr.details").hide().closest("tbody").find("a.show").on('click', function(e) {
e.preventDefault();//prevent hyperlink action
$("tr.details").slideUp('fast');//hide any previously opened details
$(this).closest("tr").next("tr.details").slideDown('fast');//show details for the clicked row
});
});
I am trying to display name and age in a single field of the table and I want data to be displayed in the place of . I tried the code below but it doesn't work.
CODE:
<?php
$con=mysqli_connect("localhost","root","","dva");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM apform");
while($row = mysqli_fetch_array($result)) {
echo "My Mood: ";
echo $row['mood'];
echo "<br>";
}
?>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Doctor</th>
<th>Telephone</th>
<th>Mobile</th>
<th>Meeting Time</th>
<th>Fee</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Name"><span> <?php echo $row['name']; ?> </span></td>
<td data-title="Relationship"><span> </span></td>
<td data-title="Address"><span> </span></td>
<td data-title="Telephone"><span> </span></td>
<td data-title="Mobile"><span> </span></td>
<td data-title="Contact at night"><span> </span></td>
<td data-title="Next of kin"><span> </span></td>
<td data-title="Delete"><span> </span></td>
</tr>
You can easily achieve what you need to putting the while loop inside of your table and echoing out all of the relevant fields.
<?php
$con=mysqli_connect("localhost","root","","dva");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM apform");
while($row = mysqli_fetch_array($result)) {
echo "My Mood: ";
echo $row['mood'];
echo "<br>";
}
?>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Doctor</th>
<th>Telephone</th>
<th>Mobile</th>
<th>Meeting Time</th>
<th>Fee</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($result)) { ?>
<tr>
<td data-title="Name"><span><?php echo $row['name']; ?></span></td>
<td data-title="Relationship"><span><?php echo $row['relationship']; ?></span></td>
<td data-title="Address"><span><?php echo $row['address']; ?></span></td>
<td data-title="Telephone"><span><?php echo $row['telephone']; ?></span></td>
<td data-title="Mobile"><span><?php echo $row['mobile']; ?></span></td>
<td data-title="Contact at night"><span><?php echo $row['contact']; ?></span></td>
<td data-title="Next of kin"><span><?php echo $row['nok']; ?></span></td>
<td data-title="Delete"><span>Delete</span></td>
</tr>
<?php } ?>
</tbody>