I have a table that displays SQL results, however I would like the table to display certain results, and display more upon a click, below the table in a div tag. So far I have this code that displays,'title' and 'email' and the 3rd column which will trigger a JS function and display 'details' in a div tag... How do I use JavaScript to display the specific details and hide those details when a second row details is clicked and replace the first 1?
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><?php echo $rows['title']; ?></td>
<td><?php echo $rows['email']; ?></td>
<td>More details...</td>
</tr>
EDITED:
After a comment I received, here is my entire code of the table with the div element with the id "details"
<table>
<tr>
<td><strong>Investment Title</strong></td>
<td><strong>Email</strong></td>
<td><strong>Details</strong></td>
</tr>
<?php
// Start looping table row
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><?php echo $rows['title']; ?></td>
<td><?php echo $rows['email']; ?></td>
<td>More details...</td>
</tr>
<?php
// Exit looping and close connection
}
mysql_close();
?>
<tr>
</tr>
</table>
<div id="detail"></div>
Im not sure if this is what you want to do but you can try something like this. I hope this helps
HTML
<table>
<tr>
<td><strong>Investment Title</strong></td>
<td><strong>Email</strong></td>
<td><a href='#' id='show_details'>More Details</a></td>
</tr>
<tr>
<td><?php echo $rows['title']; ?></td>
<td><?php echo $rows['email']; ?></td>
<td id='details'><?php echo $rows['details'];?></td>
</tr>
</table>
Javascript - JQuery
$(document).ready(function()
{
$('#details').hide(); //on ready hide the td details
$('#show_details').click(function()
{
$('#details').show();
});
});
UPDATE
YOU MEAN LIKE THIS SEE MY FIDDLE
Without JQuery:
HTML
<td id='details'>The details are in here...</td>
<td id='details1'>The other details are in here...</td>
Javascript
document.getElementById('details').style.display = 'table-cell';
document.getElementById('details1').style.display = 'none';
Related
I'm in the process of learning some coding. I am looking to create the results of MySQL results clickable. I would like the name (first and last name) to be "clickable" so they can link to the customer record to view. Thanks in advance for your help!
<table class="list"; >
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th>Phone</th>
</tr>
<?php while($customers = mysqli_fetch_assoc($customer_set)) { ?>
<tr>
<td><?php echo h($customers['first_name'].' '.$customers['last_name']); ?></td>
<td><?php echo h($customers['address1']. ' '.$customers['city'].', '.$customers['state'].' '.$customers['zip']); ?></td>
<td><?php echo h($customers['email1']); ?></td>
<td><?php echo h($customers['phone1']); ?></td>
</tr>
<?php } ?>
Thanks,
If you want clickable first name and last name then you need to add anchor tag with view url like below examples.
Example (send first name and last name separately)
<td><?php echo h($customers['first_name'].' '.$customers['last_name']); ?></td>
Better solution is you can send id of user . For example i am asuming you have one column id in customers table then you can pass id like below example
<td><?php echo h($customers['first_name'].' '.$customers['last_name']); ?></td>
Note: You can encrypt id by using some hash methods to securely pass id of user.
Now when you click on these links you will redirect on view page where you can get these id or firstname, lastname by using GET method.
Example
view-record.php
<?php
if(isset($_GET['uid'])) {
$userid = $_GET['uid']; //please add some validation before using this value.
}
?>
You need to use the <a> (anchor) html tag like this:
<table class="list"; >
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th>Phone</th>
</tr>
<?php while($customers = mysqli_fetch_assoc($customer_set)) { ?>
<tr>
<td><?php echo h($customers['first_name'].' '.$customers['last_name']); ?></td>
<td><?php echo h($customers['address1']. ' '.$customers['city'].', '.$customers['state'].' '.$customers['zip']); ?></td>
<td><?php echo h($customers['email1']); ?></td>
<td><?php echo h($customers['phone1']); ?></td>
</tr>
<?php } ?>
Replace the url http://example.com/... with whatever real url you want to use for the link.
I have some checkbox in a table that contains the id of that row item. I want to allow the user to select multiple rows. However, I can't seem to check the checkbox on Chrome. I loaded the site up on my mobile and it works. I have tried to insert an onclick but it doesn't seem like the checkbox is registering any clicks to it as well. Please help.
The table
<?php echo form_open_multipart('Events/Two/Search');?>
<table class="table">
<thead>
<tr class="text-left">
<td></td>
<td>Name</td>
<td>Email</td>
<td>Phone Number</td>
<td>Address</td>
</tr>
</thead>
<tbody>
<?php
if(!empty($datatable)){
foreach ($datatable as $data){
?>
<tr>
<td><input type="checkbox" name="id[]" value="<?php echo $data->id; ?>"/></td>
<td><?php echo $data->first_name." ".$data->last_name; ?></td>
<td><?php echo $data->email; ?></td>
<td><?php echo $data->phone_number; ?></td>
<td><?php echo $data->address;?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<?php echo form_close(); ?>
EDIT: I have cleared my cache and cookies as well. It works on the mobile but not on chrome for some reason.
EDIT 2 : It works on Safari
EDIT 3 : If I place a checkbox on another place, I can check it. Just not in the table
<tbody>
<?php
if(!empty($datatable)){
foreach ($datatable->result() as $data){
?>
<tr>
<td><input type="checkbox" name="id[]" value="<?php echo $data->id; ?>"/></td>
<td><?php echo $data->first_name." ".$data->last_name; ?></td>
<td><?php echo $data->email; ?></td>
<td><?php echo $data->phone_number; ?></td>
<td><?php echo $data->address;?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
First Your query is not working it seems so please preview this code the use jquery append to add more row if you need help on that code will be below
Jquery on click ADD/REMOVE ROW please Visit the link below
https://jsfiddle.net/susanadhikary/omngzss8/8/
The html table rows aren't displayed properly. I want to combine the two while loops in the table row but sadly the Update and Delete button are not arranged properly.
here's my code I used two queries that's why it has two while loops
$sql_sel=mysql_query("SELECT students.stud_id, students.fname, students.lname, students.gender, subjects.sub_code, subjects.subject_name FROM students, enrollments, subjects WHERE students.stud_id = enrollments.stud_id and subjects.sub_code = enrollments.sub_code");
$sql_sel1=mysql_query("SElECT * FROM enrollments");
while($row=mysql_fetch_array($sql_sel)) //for the first query
{
$i++;
$color=($i%2==0)?"lightblue":"white";
?>
<tr bgcolor="<?php echo $color?>">
<td><?php echo $i;?></td>
<td><?php echo $row['stud_id'];?></td>
<td><?php echo $row['fname']." ".$row['lname'];?></td>
<td><?php echo $row['gender'];?></td>
<td><?php echo $row['sub_code'];?></td>
<td><?php echo $row['subject_name'];?></td>
<?php
while($row=mysql_fetch_array($sql_sel1)) //for the second query
{ <!-------The Update and Delete Button are not displayed properly------>
?>
<td align="center"><img src="picture/update.png" /></td>
<td align="center"><img src="picture/delete.png" /></td>
<?php
}
?>
</tr>
<?php
}
?>
Here is the visual scenario of the problem:
The desired output must be like this:
In table header use colspan='4' for the last column.
Also be sure that you fill the table with empty columns, where you don't have information to fill with.
Edit 1:
Sorry, I haven't seen what's really the problem was. Here should be the working code:
while($row=mysql_fetch_array($sql_sel))
{
$i++;
$color=($i%2==0)?"lightblue":"white";
?>
<tr bgcolor="<?php echo $color?>">
<td><?php echo $i;?></td>
<td><?php echo $row['stud_id'];?></td>
<td><?php echo $row['fname']." ".$row['lname'];?></td>
<td><?php echo $row['gender'];?></td>
<td><?php echo $row['sub_code'];?></td>
<td><?php echo $row['subject_name'];?></td>
<!-- You were already in a while loop -->
<td align="center"><img src="picture/update.png" /></td>
<td align="center"><img src="picture/delete.png" /></td>
</tr>
<?php
}
?>
As you can see you were already in a while loop, and the second one was unnecesary.
Edit 2:
There is a single SQL query now:
<?php
// UPDATED SQL QUERY
$sql_sel = mysql_query("SELECT students.stud_id, students.fname, students.lname, students.gender, subjects.sub_code, subjects.subject_name, enrollments.enroll_num
FROM students, enrollments, subjects
WHERE students.stud_id = enrollments.stud_id and subjects.sub_code = enrollments.sub_code");
while($row = mysql_fetch_array($sql_sel)){
$i++;
$color=($i%2==0)?"lightblue":"white";
?>
<tr bgcolor="<?php echo $color?>">
<td><?php echo $i;?></td>
<td><?php echo $row['stud_id'];?></td>
<td><?php echo $row['fname']." ".$row['lname'];?></td>
<td><?php echo $row['gender'];?></td>
<td><?php echo $row['sub_code'];?></td>
<td><?php echo $row['subject_name'];?></td>
<td align="center"><img src="picture/update.png" /></td>
<td align="center"><img src="picture/delete.png" /></td>
</tr>
<?php
}
?>
Why it didn't worked?
You were reading the whole informations for every student. Then you were reading the whole informations in enrollments table.
You started writing the first row with student information, and inside it you told the server to start writing all the information he had regarding enrollments (without even be linked to that student's id).
When the server reached the second row, all the information available for enrollments were depleted.
Now you have them linked in your first query. Please ask in comments if you need further explanations.
Try this,
$sql= "SELECT sts.stud_id, sts.fname, sts.lname, sts.gender, sub.sub_code, sub.subject_name, ets.enroll_num
FROM students sts
JOIN enrollements ets ON(sts.stud_id = ets.stud_id)
JOIN subjects sub ON (sub.sub_code = ets.sub_code)
GROUP BY sts.stud_id, sub.sub_code";
$sql_sel=mysql_query($sql);
while($row=mysql_fetch_array($sql_sel)) //for the first query
{
$i++;
$color=($i%2==0)?"lightblue":"white";
?>
<tr bgcolor="<?php echo $color?>">
<td><?php echo $i;?></td>
<td><?php echo $row['stud_id'];?></td>
<td><?php echo $row['fname']." ".$row['lname'];?></td>
<td><?php echo $row['gender'];?></td>
<td><?php echo $row['sub_code'];?></td>
<td><?php echo $row['subject_name'];?></td>
<td align="center"><img src="picture/update.png" /></td>
<td align="center"><img src="picture/delete.png" /></td>
</tr>
<?php
}
?>
I have added enroll_num column in select, And you dont need two queries for this. One query with proper join will be fine.
Good Afternoon,
I have 3 foreach loops on my page, the first gets the teams, the second gets each person in the team, and the third gets each unique reference to a task that the agent has completed. I have collected this data and it is being displayed fine. I now want to add some JQuery to it so it will hide the agents and references unless the relevant team or agent is clicked on.
So if I load the page everything will be hidden apart from the teams, when I click on a team it will show the agents, when I click on an agent it will show the references.
I am having trouble assigning unique ID's to each row and finding those in the JQuery script.
Here is my code...
<?php if($aForm['sTaskType'] !== 'CP' ){?>
<table style="width: 95%">
<tr>
<th>Area</th>
<th>Pass</th>
<th>Pass with feedback</th>
<th>Fail with Minors</th>
<th>Fail with Majors</th>
</tr>
<?php foreach ($aQualityTeamResults AS $iBusinessStreamId => $aTeamData) {
$aQualityAgentResults = $oRadiusQualityFns->GetQualityAgentResults($sDateFrom, $sDateTo, $sTaskType, $aTeamData['iBusinessStreamId']);?>
<tbody>
<tr class="TeamClick<?php echo $aTeamData['iBusinessStreamId'];?>">
<td><?php echo $aTeamData['sBusinessStream']?></td>
<td><?php echo $aTeamData['Pass']?></td>
<td><?php echo $aTeamData['Pass with Feedback']?></td>
<td><?php echo $aTeamData['Fail with Minors']?></td>
<td><?php echo $aTeamData['Fail with Majors']?></td>
</tr>
</tbody>
<?php foreach ($aQualityAgentResults AS $iUserId => $aAgentData) {
$aQualityPropertyResults = $oRadiusQualityFns->GetQualityPropertyResults($sDateFrom, $sDateTo, $sTaskType, $aAgentData['iBusinessStreamId'], $aAgentData['Agent']);
?>
<tbody>
<tr class="Agent<?php echo $iUserId]?>">
<td><?php echo $oRadiusUser->Get_User_Name($aAgentData['Agent']);?></td>
<td><?php echo $aAgentData['Pass'];?></td>
<td><?php echo $aAgentData['Pass with Feedback'];?></td>
<td><?php echo $aAgentData['Fail with Minors'];?></td>
<td><?php echo $aAgentData['Fail with Majors'];?></td>
</tr>
</tbody>
<?php foreach ($aQualityPropertyResults AS $iUserId => $aPropertyData) { ?>
<tbody>
<tr class="Property<?php echo $aPropertyData['iUserId'];?>">
<td colspan="2"><font color="black"><?php echo $aPropertyData['sPropertyCode']?></font></td>
<td colspan="3"><?php echo $aPropertyData['Result']?></td>
</tr>
</tbody>
<?php
}
}
}
?>
</table>
I have given each of the rows a unique class by adding in the unique identifier from the database. I just dont know how to find these within the Jquery script.
EDIT:
Maybe not explained myself properly, I would like help with how to set up this script but obviously a lot better.
<script language="javascript" type="text/javascript" >
$(document).ready(function() {
$('.Agent').hide;
$('.Property').hide;
$(document).on('click','.TeamClick',function(){
$('.Agent').toggle('show');
$('.Property').toggle('show');
});
});
</script>
But in this case it will show/hide all of the rows as they will all have the same id's, whereas now I have added on the unique id on the end with the php code in the class, I dont know how to call those as they all are called different classes.
So if I click on TeamClick1, it shows the actual rows for that team (Agent1), and not all of them. but obviously I cant type out all of the unique id's I just dont know how to get them from the php in JQuery.
<script language="javascript" type="text/javascript" >
$(document).ready(function() {
$('.Agent').hide;
$('.Property').hide;
$(document).on('click','.TeamClick(UNIQUE ID)',function(){
$('.Agent(UNIQUE ID)').toggle('show');
$('.Property(UNIQUE ID)').toggle('show');
});
});
Hope this makes sense.
I am hasty but it is like this
<?php if($aForm['sTaskType'] !== 'CP' ){?>
<table style="width: 95%">
<tr>
<th>Area</th>
<th>Pass</th>
<th>Pass with feedback</th>
<th>Fail with Minors</th>
<th>Fail with Majors</th>
</tr>
<?php foreach ($aQualityTeamResults AS $iBusinessStreamId => $aTeamData) {
$aQualityAgentResults = $oRadiusQualityFns->GetQualityAgentResults($sDateFrom, $sDateTo, $sTaskType, $aTeamData['iBusinessStreamId']);?>
<tbody>
<tr class="TeamClick<?php echo $iBusinessStreamId;?>">
<td><?php echo $aTeamData['sBusinessStream']?></td>
<td><?php echo $aTeamData['Pass']?></td>
<td><?php echo $aTeamData['Pass with Feedback']?></td>
<td><?php echo $aTeamData['Fail with Minors']?></td>
<td><?php echo $aTeamData['Fail with Majors']?></td>
</tr>
</tbody>
<?php foreach ($aQualityAgentResults AS $iUserId => $aAgentData) {
$aQualityPropertyResults = $oRadiusQualityFns->GetQualityPropertyResults($sDateFrom, $sDateTo, $sTaskType, $aAgentData['iBusinessStreamId'], $aAgentData['Agent']);
?>
<tbody>
<tr class="Agent<?php echo $iUserId; ?>">
<td><?php echo $oRadiusUser->Get_User_Name($aAgentData['Agent']);?></td>
<td><?php echo $aAgentData['Pass'];?></td>
<td><?php echo $aAgentData['Pass with Feedback'];?></td>
<td><?php echo $aAgentData['Fail with Minors'];?></td>
<td><?php echo $aAgentData['Fail with Majors'];?></td>
</tr>
</tbody>
<?php foreach ($aQualityPropertyResults AS $iUserId2 => $aPropertyData) { ?>
<tbody>
<tr class="Property<?php echo $iUserId2 ;?>">
<td colspan="2"><font color="black"><?php echo $aPropertyData['sPropertyCode']?></font></td>
<td colspan="3"><?php echo $aPropertyData['Result']?></td>
</tr>
</tbody>
<?php
}
}
}
?>
</table>
I'm putting the identifiers in classes, but if you want put in IDs you can, is the same thing, like this id="<?php ... ?>"
I develop a transaction function here. But I have a trouble with javascript. As you can see below, there are two table, where the first one is for display the item and the second table is for purchasing. What i want to do is, the row for an item in first table is clickable. When the row is clicked, the item that have been choose come out in the second table. And at the second table cell for discount can be editable and the total price is changing by the discount. Can anyone help me to pass the value between these two tables?
<fieldset>
<legend>Item Show</legend>
<table border="1">
<tr>
<td>Item Name</td>
<td>Item Code</td>
<td>Manufacturer</td>
<td>Price</td>
<td>Stock</td>
</tr>
<?php
while($row = mysql_fetch_array($result))
{
?>
<tr>
<td><?php echo $row['item_name']; ?></td>
<td><?php echo $row['item_code']; ?></td>
<td><?php echo $row['item_manufacturer']; ?></td>
<td><?php echo $row['sell_price']; ?></td>
<td><?php echo $row['stock']; ?></td>
</tr>
<?php
}
?>
</table>
</fieldset>
<fieldset>
<legend>Item Sale</legend>
<table border="1">
<tr>
<td>Item name</td>
<td>Item Code</td>
<td>Stock</td>
<td>Price</td>
<td>Quantity</td>
<td>Discount</td>
<td>Total Price</td>
</tr>
</table>
</fieldset>
Here are the steps that you should follow.
give a common class to all your like
use jQuery events like
$(".clickable").on('click',function(e,this){
//a.use "this" here to extract values that you want to pass to other table
//b.append <tr><td></td>....</tr> with this.values to your table
})
If you can do the above - - things will go fine