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();
Related
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 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 to generate some text boxes after each line of row sent from database, so I have this user who have 2 rows:
And of course each row belongs to an id:
<td><?php echo $counter--; ?></td>
<td><?php echo $installment['date_now'] ?></td>
<td><?php echo $installment['payment'] ?> $</td></tr>
</tr>
<?php } ?>
<tr><th colspan="10" style="text-align: right;">Remaining:</th>
<th><?php echo ($cash['project_cost'] - $sum) ?> $</th>
</tr>
<tr id="<?php echo $cash['infoid']; ?>"><td colspan="8" style="text-align: right;">Add Payment</td>
<td><input type="date" class="form-control" id="date_pay_now[]"/></td>
<td><input class="form-control" type="text" id="pay_now"/></td>
<td><button id="add_payment" class="btn btn-success glyphicon glyphicon-plus"></button>
</tr>
<tr><td></td></tr><tr><td></td></tr>
<?php $sumCash = $sumCash + $cash['project_cost']; } ?>
<tr>
<th colspan="10">Cash Total</th><th id="final_cash"><?php echo $sumCash ?> $</th>
</tr>
</table>
</div>
<?php } else { ?>
No Payments available
<?php } ?>
Now, when select a date and type an amount, I should send those values into AJAX and but first I need to get the id of the row so I can send it too.
$("#add_payment").click(function()
{
var date_of_pay = $("#date_pay_now").val();
var pay_now = $("#pay_now").val();
var id_pay = $(this).closest('tr').attr('id');
console.log(id_pay);
if(date_of_pay == "" || pay_now == "")
{
$("#date_pay_now").css('border-color', 'red');
$("#pay_now").css('border-color', 'red');
}
if(date_of_pay != "" && pay_now != "")
{
$.ajax
({
//Still not typed
});
}
});
If you see the image, when I click on the first button, I see the id correctly at the console and if they are empty I can see the red color, but when I refresh the page and click directly on the second row button, I can't see any value at the console and no css color due to empty text box shown.
And here when I click on the next button, no color and no id at the console:
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 am assuming that toggle() show() and hide turns a element into a block element therefore disabling the capabilities to use colspan. When I am not hiding the TR, colspan works perfectly. as soon as a toggle or do the show hide, it no longer works.
Is there a jquery method out there that will successfully show and hide a table row while mainting the table cell row.
I somewhat found the solution considering the following.
HTML
<h3 class="tac"><?php echo 'Communications';?></h3>
<br/><br/>
<table class="projects-table-style deposit-table communication" cellpadding="0" cellspacing="0">
<tr>
<th>Date</th>
<th>Consultant</th>
<th>Country</th>
<th>Rating</th>
<th>Communications</th>
<th>Last Bid</th>
<th>Memorandum</th>
</tr>
<?php
$i = 0;
foreach ($comments as $comment):
$class = null;
if ($i++ % 2 == 0) {
$class = ' class="altrow"';
}
?>
<tr<?php echo $class;?>>
<td>Date</td>
<td>
<?php echo $comment['User']['username']; ?>
</td>
<td><?php echo $comment['User']['Country']['name']; ?></td>
<td>Rating</td>
<td>
x communcations
Reply
</td>
<td>Last Bid</td>
<td>Memorandum</td>
</tr>
<tr style="display:none" class="reply-box">
<td style=" background: #fff" colspan="7">
<table width="100%">
<?php foreach($comment['Comment'] as $com): ?>
<tr>
<td width="20%">
<?php echo $com['From']['username']; ?>
</td>
<td>
<?php echo $com['comment']; ?>
</td>
<td width="15%">
<?php echo $com['created']; ?>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php echo $this->Form->create('Project');?>
<?php echo $this->Form->input('message',array('type'=>'textarea','cols'=>'77','style'=>'margin-right:0px;padding:0px;'));?>
<?php echo $this->Form->end(__('Submit', true,array('attribute'=>'value')));?>
</td>
</tr>
<?php endforeach; ?>
</table>
JS
$(document).ready(function() {
$('.reply-to').click(function(){
$(this).parent().parent().next().toggle('slow');
return false;
});
});
So long as I toggle .reply-box which is appended to the TR. the TD element nested within will maintain its table-cell structure and will still keep the colspan attribute. just wanting to know if anyone else knows a better solution.
The jQuery API for .show() says this:
This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
However, I'm not sure how it will function if the element is originally hidden (using display: none in either a CSS declaration or inline style); though I couldn't get it to break in a jsFiddle so I think it should function correctly.