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;
?>
Related
I created an internal email system within the project. When I receive a new message the column with the subject name in my table is bolded to inform that the message has not yet been read.
code:
<?php
while($row = mysqli_fetch_array($result))
{
?>
<section id="s1">
<div class="div1" id="minhaDiv" style="float: left;">
<table class="table table-bordered">
<tr>
<th width="20%">De</th>
<th width="60%">Assunto</th>
<th width="10%">Prioridade</th>
<th width="10%">Recebido</th>
</tr>
<tr>
<th width="10%" colspan=4>Recebido: <?php echo $row["Data"]; ?></th>
</tr>
<tr>
<td><?php echo $row["De"]; ?></td>
<td class="td-info view_data" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal" width="20%" style="font-weight:bold" onclick="this.style['font-weight'] ='normal'"><?php echo $row["Assunto"]; ?></td>
<td><?php echo $row["Prioridade"]; ?></td>
<td><?php echo $row["Hora"]; ?></td>
</tr>
<tr>
<?php
}
?>
</table>
</div>
</section>
In the image, which is surrounded by green already clicked to read, the red has not yet vliquei to read, so it is bold:
I use this code to put bold inside the td:
width="20%" style="font-weight:bold" onclick="this.style['font-weight'] ='normal'"
The problem is that if you refresh the page, even after reading the messages, they come back in bold and should not. After clicking once, they can not be left in bold
Solution to achieve the condition.
I created a Status field in the database table, where 1 is unread message and 0 message is read, now is to create the condition in td with if. In the javascript with which I open the modal I made the following change:
$('.td-info').click(function(){
var item_id = $(this).attr("id");
var status = $(this).attr("Status");
$.ajax({
url:"./fetchRAD",
method: "POST",
data:{item_id:item_id, status:status},
success:function(data){
}
});
});
In td I indicated the id of the record in the id of td:
id="<?php echo $row["Id"]; ?>"
file with php:
if(isset($_POST["item_id"]))
{
$query = "Update centrodb.Alertas SET Status = '0' WHERE Id = '".$_POST["item_id"]."'";
$result = mysqli_query($conn, $query);
}
Pata check in the td we put like this:
width="20%" <?php echo $row["Status"] == '1'?' style="font-weight:bold" ':' style="font-weight:normal" '?>
td complete:
<td class="td-info view_data" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $row["Status"] == '1'?' style="font-weight:bold" ':' style="font-weight:normal" '?>><?php echo $row["Assunto"]; ?></td>
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.
Here I've a drop-down and when user changes this drop-down, I want to show only specific table rows e.g. if Patient Type=Inpatient then JQuery will show only those records .The table rows are dynamically generated by php code. Please suggest me the way i'm new in JQuery.
My drop-down is:
<tr>
<td style="text-align:left"><label>Patient Type:</label></td>
<td>
<select id="patient_type">
<option>Select patient type</option>
<option>InPatient</option>
<option>OutPatient</option>
</select>
</td>
</tr>
The PHP code:
<table class="draw_table" id="datawtable" border="1" width="100%" cellspacing="0" cellpadding="0">
<tr>
<th>
Patient_name
</th>
<th>
Patient Type
</th>
<th>
Payment Type
</th>
<th>
Date
</th>
<th>Amount</th>
</tr>
<?php
$query="SELECT
doctor.doctor_name,inovoice.patient_name,inovoice.patient_type,inovoice.payment_type,inovoice.inovoice_date,inovoice.inovoice_amount from doctor,inovoice,prescription
where doctor.doctor_name=prescription.doctor_name and inovoice.patient_name=prescription.patient_name and doctor.doctor_name='$_SESSION[doctor_nm]' and inovoice.inovoice_date between '$_SESSION[from_dt]' and '$_SESSION[to_dt]' $sortingCode ";
$result=mysql_query($query);
while($row=mysql_fetch_array($result))
{
$newdate=date("d/m/Y", strtotime($row['inovoice_date']));
?>
<tr>
<td><?php echo $row['patient_name'];?></td>
<td id="<?php echo $row['patient_type'];?>"><?php echo $row['patient_type'];?></td>
<td id="<?php echo $row['payment_type'];?>"><?php echo $row['payment_type'];?></td>
<td><?php echo $newdate;?></td>
<td><?php echo $row['inovoice_amount'];?></td>
</tr>
<?php
}
?>
JQuery code:
$( document ).ready(function() {
$('#patient_type').change(function(){
if($(this).val() == "InPatient")
{
alert("hiiiii");
//show InPatient
}
})
});
First of all you should't use id, because it is possible that there are rows with the same id. An id should always be unique. The second thing is if you want to show/hide the rules you should use a identifier on rule (tr) level. If you are using jQuery you can use a data tag, for example:
<tr data-patientType="<?php echo $row['patient_type'];?>">
<td><?php echo $row['patient_name'];?></td>
<td><?php echo row['patient_type'];?></td>
<td><?php echo $row['payment_type'];?></td>
<td><?php echo $newdate;?></td>
<td><?php echo $row['inovoice_amount'];?></td>
</tr>
In jQuery you would get something like the code below:
$( document ).ready(function() {
$('#patient_type').change(function(){
var selectedValue = $("#patient_type option:selected").text();
$('table tr').each(function(){
if($(this).data('patientType') == selectedValue)
{
$(this).css('display', 'block');
}
else
{
$(this).css('display', 'hidden');
}
});
})
});
You need to find the selected option from the select, not it's value.
$( "#patient_type option:selected" ).text();
I have a jquery dataTable (this is link) in each row there are a checkbox! I whish that when the checkbox is checked the row color change!
I try in this way:
tableCode;
<table id="tabellaOrdinaFarmaci" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Codice Farmaco</th>
<th>Nome Farmaco</th>
<th>Quantità </th>
<th>Quantità di alert</th>
<th>Stato</th>
<th></th>
</tr>
</thead>
</thead>
<tbody>
<?php foreach ($query as $row): ?>
<tr>
<td><?php echo $row->aic; ?></td>
<td><?php echo $row->denominazione ?></td>
<td><?php echo $row->quantita; ?></td>
<td><?php echo $row->alert; ?></td>
<td><?php echo $row->stato; ?></td>
<td> <input type="checkbox" name="radiog_lite" id="<?php echo $row->aic; ?>" class="css-checkbox" />
<label for="<?php echo $row->aic; ?>" class="css-label"></label>
</td>
</tr>
<?php endforeach; ?>
</tbody>
jQuery code:
jQuery(document).ready(function() {
jQuery('input').click(function() {
jQuery(this).parents("tr").css('background-color', 'yellow');
});
});
This code color only the rows that have an index odd!If I inspect the element from the browser background-color: yellow is added to all rows! Help me thanks in advance!
I think that the problem is bootstrap dataTable.
if you want only that row to change color for which checkbox is checked then you have to use closest() and use change event for it:
jQuery('#tabellaOrdinaFarmaci input:checkbox').change(function() {
if(this.checked) // check if checkbox checked then change color of row
jQuery(this).closest("tr").css('background-color', 'yellow !important');
});
jQuery('#tabellaOrdinaFarmaci input:checkbox').change(function() {
if(this.checked) // check if checkbox checked then change color of row
jQuery(this).closest("tr").css('background-color', 'yellow !important');
});
convert angulerjs
Use closest() to find the parent <tr>
Your elements are getting appended later to the DOM, use event delegation,
jQuery(document).ready(function() {
jQuery(document).on('click','input',function() {
jQuery(this).closest("tr").css('background-color', 'yellow');
});
});
I have an HTML which displays data from a database table. There'a checkbox field, which stores id of the user. And when I click on a row, that ID has to be passed to another page using a JavaScript function. But I have encountered a few errors. I don't know where I went wrong.
This is my Javascript function. It is used to make the table rows clickable. SO when I click on a row, the corresponding ID is passed to editgroup.php page.
<script>
$('table.table tbody tr').click(function(event)
{
if(event.target.type === 'checkbox')
{
event.preventdefault()
}
else
{
window.location='edituser.php?val=<?php echo $id; ?>';
}
});
</script>
Below given is my table:
<table id="edituser" class="clickable"
<thead>
<th></th>
<th>UserID</th>
<th>Username</th>
</thead>
<tbody>
<?php
for($i=0; $i<$x; $i++)
{
$id= $val_array[$i]['id'];
$userName= $val_array[$i]['userName'];
?>
<tr>
<td class="text-center"><input type="checkbox" value="<?php echo $id; ?>"></td>
<td><?php echo $id; ?></td>
<td><?php echo $userName; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
you have to make some change
First in your tr add id like this
<?php
for($i=0; $i<$x; $i++)
{
$id= $val_array[$i]['id']; //data from database
$userName= $val_array[$i]['userName']; //data from database
?>
<tr id="<?php echo $id;?>"> <!-- add id here -->
<td ><input type="checkbox" value="<?php echo $id; ?>"></td>
<td><?php echo $id; ?></td>
<td><?php echo $userName; ?></td>
</tr>
<?php } ?>
now your JS
<script>
$('table.clickable tbody tr').click(function(event){
if(event.target.type === 'checkbox'){
event.preventdefault()
}else{
var val = $(this).attr('id');
window.location='edituser.php?val='+val;
}
}); </script>
Your Javascript will be
$('table.table tbody tr').click(function(event){
if(event.target.type === 'checkbox'){
event.preventdefault()
}else{
var value = (this).find("input[type='checkbox']").val(); /* Get value from clicked tr Checkbox */
window.location.replace('edituser.php?val='+value); /* Pass the value */
}
});
Create new function with dynamic id for your table row
<tr onclick="edit_user(<?php echo $id;?>)" >
....
</tr>
Then you can find your row of where you have to click
<script>
function edit_user(user_id) {
if(user_id != '') {
window.location='edituser.php?val='+user_id;
}
}
</script>
Or else
This is more even simple your code.
<input type="checkbox" value="<?php echo $id; ?>" onclick="document.location.href='edituser.php?val=<?php echo $id; ?>'">