i have this code:
<table id="table" style="width: 100%; text-align: center;" border="0">
<?php while ($row = $q->fetch()): ?>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td id="columna1">
<div class="col-lg-12" >
<div class="food-grid-item grid-style-one">
<br>
<br>
<div class="food-thumb grid-item">
<img src="assets/images/foodmenu/<?php echo $row['imagen']?>" href="#foodmenu1">
</div>
<div class="food-info grid-item">
<h3 class="food-title grid-item"><?php echo $row['product_name']?></h3>
<p><?php echo $row['descripcion']?></p>
<div class="food-price grid-item"><span>$</span><?php echo $row['price']?></div>
<div class="food-cart-tools grid-item">
Add to cart
</div>
</div>
</div>
</div>
</td>
<td id="columna2">
</td>
</tr>
<?php endwhile; ?>
</table>
as you can see, the "columna2" td, is empty cause i want to populate each database row on each to get the population in 2 columns and i don't know how to make it. it's something like this:
1 2
3 4
5 6
I try to do it on diferent ways but have no luck! Please if yo need more details please let me know i am new.
Thank you all
Start by putting all of the results in an array first.
$num = mysqli_num_rows($query);
$result_array = [];
for($i = 1; $i <= $num; $i++) {
$result = mysqli_fetch_array($query);
$result_array[] = $result;
}
And start to construct a table using a loop.
<table>
<thead>
<tr>
<th>| Column 1 |</th>
<th>| Column 2 |</th>
</tr>
</thead>
<tbody>
<?php
$column_size = 2;
for($row = 0; $row < $num / $column_size; $row++) {
echo '<tr>';
for($column = 0; $column < $column_size; $column++) {
echo '<td>';
echo 'ID: '.$result_array[($row * $column_size) + $column]['u_id'];
echo '</td>';
}
echo '</tr>';
}
?>
</tbody>
</table>
The result:
https://i.stack.imgur.com/CQSny.png
Related
I'm trying to do the sum of all cart items but it is not doing it.
It is showing only the sum of first or last item added in the cart.
What is the issue i cannot understand. I have tried by moving code in the java but no use.
Suppose i have 2 items.
Item1 total is = 100
Item2 total is = 200
Total should be 300 not only the 1 items total.
Below is my code.
Thanks in advance
<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<table class="table mg-bottom-45 refresh" id="myTable">
<thead>
<tr>
<th class="product-cart-price"><span>PRICE</span></th>
<th class="product-cart-price"><span>TOTAL</span></th>
</tr>
</thead>
<tbody>
<?php
include ('inc/db.php');
$citem = "select * from orders_temp
where user_id = 1 order by id
";
$ciquery = $dba2->query($citem);
while ($cifetch = $ciquery->fetch_assoc()){
$orderID = $cifetch['id'];
$userID = $cifetch['user_id'];
?>
<td class="product-cart-thumbnail">
<input name="quantity" type="text" data-id="<?php echo $orderID; ?>"
data-price="" value="<?php echo $cifetch['qty']; ?>"
class="un quant" />
</td>
<td class="product-cart-thumbnail">
<input name="quantity" type="text" data-id="<?php echo $orderID; ?>"
data-price="<?php echo $cifetch['price']; ?>"
value="<?php echo $cifetch['price']; ?>" class="un pricex" />
</td>
<?php } ?>
<td class="totalAmount"></td>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
updatexx<?php echo $orderID; ?>();
function updatexx<?php echo $orderID; ?>() {
var sumx = '';
$('#myTable > tbody > tr').each(function() {
var quantityx = $(this).find('.quant').val();
var pricex = $(this).find('.pricex').attr('data-price').replace(',', '.');
var amountx = (quantityx * pricex).toFixed(3);
sumx += amountx;
});
$('.totalAmount').text(sumx);
}
});
</script>
First, please make sure that your loop is running multiple times (same number of products in cart).
$('#myTable > tbody > tr').each(function() {})
so that the above loop iterate exact number times as per required.
You should make some changes in code as follows:
var sumx = 0.00;
and in loop code should be
sumx += parsefloat(amountx);
So here is the solution with some changes in my code.
Now it is working perfectly as required. It is doing the sum of all items and everything what i want.
<table class="table mg-bottom-45 refresh" id="myTable">
<tbody>
<?php
$i = 0;
//error_reporting(0);
$ses_mem = 1;
include ('inc/db.php');
$citem = "select id, user_id, qty, org_price from orders_temp
where user_id = '".$ses_mem."' and status = 1
order by id
";
$ciquery = $dba2->query($citem);
while ($cifetch = $ciquery->fetch_assoc()){
$orderID = $cifetch['id'];
?>
<tr>
<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
updatexx<?php echo $orderID; ?>();
function updatexx<?php echo $orderID; ?>() {
var sumx = 0.000;
var quantity;
$('#myTable > tbody > tr').each(function() {
quantity = $(this).find('.quant').val();
var price = $(this).find('.pricex').attr('data-price').replace(',', '.');
var amountx = (quantity * price);
var munterx = amountx.toFixed(3);
sumx += amountx;
$(this).find('.amountx<?php echo $orderID; ?>').text('' + munterx);
});
var sumxx = sumx.toFixed(3);
$('.total').text(sumxx);
}
});
</script>
<td class="single-qty" style="border: 0;">
<input id="<?php echo $orderID; ?>" name="quantity" type="text"
data-id="<?php echo $orderID; ?>"
data-price="" value="<?php echo $cifetch['qty']; ?>"
class="un quant" />
</td>
<td class="product-cart-price pricex" data-price="<?php echo $cifetch['org_price']; ?>">
</td>
<td class="amountx<?php echo $orderID; ?>">
</td>
</tr>
<?php } ?>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<td>Sub Total (RS)</td>
<td class="text-right"
style="text-shadow: 2px 2px 3px #999999; font-weight: bold;
color: black; direction: rtl;">
<span class="total">
</span>
</td>
</tr>
</tbody>
</table>
I have an html table where i retrieve data from a database using PHP. The table is quite simple, i have three fields: Name, Quantity and Price. At the end of the table i have an additional field, Subtot, that shows the final cost (SumOfAllItems(Quantity*Price)).
I need to be able to change the "Quantity" value in each row and the "Subtot" should update accordingly. I also need to be able to set min/max value the user can use to update the cell.
I was thinking to add something like a button or any kind of list/input by the "Quantity" value in each row.
I think i need to use javascript but i am not sure, any suggestion is welcome.
Following my code.
Thanks
<table>
<tbody>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price<th>
</tr>
<?php
while($row2 = $result->fetch_assoc())
{?>
<tr>
<td><?php echo $row2["Name"] ?></td>
<td><?php echo $row2["Quantity"] ?></td>
<td><?php echo $row2["Price"]?></td>
</tr>
<?php
$subtot = $subtot + ($row2["Price"] * $row2["Quantity"])
} ?>
<td></td>
<td><b>Subtot.</b></td>
<td><b><?php echo $subtot2 ." Euro"; $tot = $subtot1 + $subtot2;?> </b></td>
</tbody>
</table>
The following should work, however i do not recommend this method (any method btw) without any validation on server side.
You need this on top of your php file:
<?php
$total = 0;
Then your table like:
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price<th>
</tr>
</thead>
<tbody>
<?php while($row2 = $result->fetch_assoc()) { ?>
<tr>
<td><?php echo $row2['name'] ?></td>
<td><input class="row" min="0" onchange="myFunction()" data-price="<?php echo $row2['price'] ?>" type="number" value="<?php echo $row2['quantity'] ?>"/></td>
<td><?php echo $row2['price'] ?></td>
</tr>
<?php
$total += $row2['price'] * $row2['quantity'];
}
?>
<td></td>
<td>
<b>Subtot.</b>
</td>
<td>
<b id="total"><?php echo $total; ?></b>
</td>
</tbody>
</table>
And you need the following script tag:
<script>
function myFunction(){
var total = 0;
var elements = document.getElementsByClassName("row");
for(var i = 0; i < elements.length; i++) {
total += elements[i].value * elements[i].dataset.price;
}
var totalEl = document.getElementById("total");
totalEl.innerHTML = total;
}
</script>
Again.. this is a very simple solution, but it should work.
I'm having some issues with dynamic tables and js code
Here's the table
<table class="table table-bordered table-striped responsive-utilities" id="m1r2">
<thead>
<tr>
<th data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>"> <?php echo $lang['m1r7Auditores']; ?> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>">
<select class="select2 m-b-10 select2-multiple" multiple="multiple" data-placeholder="Seleccione" name="m1r7Auditores1[]">
<?php foreach ($auditores as $aud ): ?>
<option value="<?php echo $aud->userRut; ?>"><?php echo ''.$aud->userRut.'</option>
<?php endforeach; ?>
</select> -
</th>
</tr>
</tbody>
</table>
And the JS to add more rows is like this
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = document.getElementById('cuantos').value;
var num2 = 1;
var sum = Number(num) + num2;
document.getElementById("m1r2").insertRow(-1).innerHTML = '<tr>' +
'<th scope="row" data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>"><select multiple="multiple" name="m1r7Auditores1[]">' +
' <?php foreach ($auditores as $aud ): ?>' +
' <option value="<?php echo $aud->userRut; ?>"><?php echo ''.$aud->userRut.'</option>' +
' <?php endforeach; ?>' +
'</select></th>' +
'</tr>';
The result its the first one working like a charm, but then, when I add some rows they came plain (no style, no js) as image shown
Thanks in advance for the help :)!
problem solved! if anyone got the same issue, the js DOM wasnt re declared afte the tr was duplicated, so I just added
$('#select'+ sum +'').multiSelect();
at the end of the code shown above :)
I have a table with a checkbox at the top of the first column to allow the user to select all items in the table and perform an AJAX script. I'm using PHP to generate the html table from a database query - I'd like to set the checked value for the header checkbox if all items in the table are also checked for the same column.
In the PHP file I'm setting up the table and the header rows first, then doing a foreach loop to create the table rows from the found records. I could add a counter along the way to track how many rows are checked, but as this is happening after the table header I can't see a way to subsequently update the header row? Unless this could be done via Javascript?
Here's my PHP page that generates the table:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th><input type="checkbox" class="select-all checkbox" name="select-all" /> </th>
<th class="text-center" scope="col">Product ID</th>
<th class="text-center" scope="col">Description</th>
</thead>
<tbody>
$found = $result->getFoundSetCount();
foreach($records as $record) {
$productID = $record->getField('productID');
if (!in_array($productID, $_SESSION['selectedProductIDs'])) {
$checked = '';
} else {
$checked = ' checked';
}
?>
<tr class="" id="<?php echo $recid ?>">
<td id="<?php echo $productID; ?>"><input type="checkbox" class="select-item checkbox" name="select-item" value="<?php echo $productID; ?>" <?php echo $checked; ?>></td>
<td><?php echo $productID; ?></td>
<td><?php echo $record->getField('Description'); ?></td>
</tr>
} // foreach
i did not test this code, but i think is what do you search
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
var allAreChecked = true;
$("table > tbody > tr > td > input[type=checkbox]").each(function(){
if(! $(this).is(':checked'))
allAreChecked = false;
});
if(allAreChecked === true){
$("table > thead > tr > th > input[type=checkbox]").prop('checked', true);
}
});
</script>
simple do the trick with string concatenation like below
1st : First run the foreach loop and concatenate all tr as a string .
2nd : Outside the foreach loop Set the $check_all_button=true; in foreach loop check any row is not checked means set the variable to false.
3rd : After all this concatenate the table header part with another variable . based on $check_all_button variable value check the checkbox .
4th : Finally echo the both variables . to render the html table .
<?php
$found = $result->getFoundSetCount();
$table_tr='';
$check_all_button=true;
foreach($records as $record)
{
$productID = $record->getField('productID');
if (!in_array($productID, $_SESSION['selectedProductIDs'])) {
$checked = '';
$check_all_button=false;
} else {
$checked = ' checked';
}
$table_tr.="<tr class='' id='<?php echo $recid ?>'>
<td id='<?php echo $productID; ?>'><input type='checkbox' class='select-item checkbox' name='select-item' value='<?php echo $productID; ?>' <?php echo $checked; ?>></td>
<td><?php echo $productID; ?></td>
<td><?php echo $record->getField('Description'); ?></td></tr> ";
<?php
}
$check_all_button=true;
$table_and_head='';
$table_and_head.="<table class='table table-condensed table-striped table-bordered'>
<thead>
<th><input type='checkbox' class='select-all checkbox' name='select-all'";
if($check_all_button==true){ $table_and_head.=' checked'; }
$table_and_head.=" /> </th>
<th class='text-center' scope='col'>Product ID</th>
<th class='text-center' scope='col'>Description</th>
</thead>
<tbody> </tbody> </table>";
echo $table_and_head;
echo $table_tr;
?>
I have the following php table and js function I've been working on. The problem is, the index ($ind) works correctly in the php, but I cannot figure out the syntax in the js function. The output of var ind= $('id')[ind]; is undefined. When I substitute and set var ind= ; it gives me the last index value in the array for each item. What can I set var ind equal to to capture the $ind value of the php in javascript?
<table id="manage-items" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr class="search">
<th> </th>
<th><?php echo $this->translate('Quantity');?></th>
<th><?php echo $this->translate('Status'); ?></th>
</tr>
</thead>
<?php $ind = 0; ?>
<?php foreach ($this->items as $item) {
$item_link = 'type=product';
?>
<div id="item_<?php echo $ind; ?>" style="display:none;">
<tr id="<?php echo $item['id']; ?>">
<td> </td>
<td class="Quantity">
<?php if ($item->item_quantity) { ?>
<span class="silvertext"><?php echo $item->item_quantity; ?></span>
<?php } else { ?>
<span class="silvertext">0</span>
<?php } ?>
</td>
<td class="Status">
<?php if (in_array($item['active'], array(0, 1))) { ?>
<div class="switch">
<label for="active[<?php echo $ind; ?>]"
class="switch-label switch-label-off">Active</label>
<input type="radio" class="switch-input"
id="active[<?php echo $ind; ?>]"
name="item[<?php echo $ind; ?>][status]"
value="1" <?php if ($item['active'] == 1) echo 'checked'; ?>>
<label for="inactive[<?php echo $ind; ?>]"
class="switch-label switch-label-on">Inactive</label>
<input type="radio" class="switch-input"
id="inactive[<?php echo $ind; ?>]"
name="item[<?php echo $ind; ?>][status]"
value="0" <?php if ($item['active'] == 0) echo 'checked'; ?>>
<span class="switch-selection"></span>
</div>
<?php } else { ?>
<?php echo $item['active']; ?>
<?php } ?>
</td>
</tr>
<?php $ind++; ?>
<?php } ?>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
if (typeof ind == "undefined") {
ind = 0;
}
$('input[type="radio"]').live('change', function () {
var status = this.value;
var id = $(this).parents('tr').attr('id');
var quantity = $(this).closest("tr").find(".Quantity > span").text();
var ind= $('id')[ind];
// a bunch of other javascript
});
});
</script>
var id contains the ID of the tr you want to access.
if you iterate through id with .find, you can access the span that you want to change.
var target = $("#"+id).find('span')[5];
Apply changes then on target
$(target).css("...", "...");