I am using basic datatable to print dynamic values that are received from the back end. I also have a hidden child row for each row with some additional values of that parent row. There is a button in each parent row and I want that on click of that link the child of that parent row should expand and be visible to the user. This should happen for every row.Here is the fiddle
However, when I am clicking on that button, the child row is not opening. Can anyone please help me with the solution
$('table').on('click', 'tr.parent .det', function() {
$(this).closest('tr.cchild').toggleClass('open');
});
.cchild {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Experience</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach($per_job as $job): ?>
<tr class="parent">
<td>
<?php echo $job->name; ?>
</td>
<td>
<?php echo $job->location; ?>
</td>
<td>
<?php echo $job->experience; ?>
</td>
<td>
<button class="show-btn rd-details det">
DETAILS
</button>
</td>
</tr>
<tr class="cchild">
<td>
<?php echo $job->age; ?>
</td>
<td>
<?php echo $job->class; ?>
</td>
<td>
<?php echo $job->address; ?>
</td>
<td>
<?php echo $job->number; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
As far I see you have not defined the class open anywhere, so just define the class in existing CSS.
.open{
display:block !important;
}
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. When you declare an object to have display none as you have done using your CSS for cchild the code hides the object.
Now to show your object you can either remove your existing class or override the existing class by using another class or style. To do so you are using toggling the class open which should have display 'block'. In simple language, you are showing and hiding the object. More info can be found here.
Related
I am confused when will display product comparison table. I have 2 tables t_product_item and t_product_specification. Here's a picture of the table structure:
I want to display a product comparison like this picture :
Script:
<table border="1">
<tr style="background-color: #C3C3C3">
<td>Product</td>
<td>Spec Name</td>
<td>Spec Value</td>
</tr>
<?php
$sql = mysqli_query($conn, "SELECT item, spec_name, spec_value FROM t_product_item JOIN t_product_specification USING (item_id)");
if (mysqli_num_rows($sql)>0){
while ($row=mysqli_fetch_array($sql)){
?>
<tr>
<td><?php echo $row['item']?>
<td><?php echo $row['spec_name']?>
<td><?php echo $row['spec_value']?>
</tr>
<?php
}}
?>
</table>
Instead it appears like this
Result:
How do I structure logically or query for the table to display like the example pic?
Change your SQL Query to:
SELECT spec_name,MAX(CASE WHEN ItemId=1 THEN spec_value END)`Samsung Galaxy S8+`
,MAX(CASE WHEN ItemId=2 THEN spec_value END)`Samsung Galaxy S8`
FROM t_product_item JOIN t_product_specification USING (item_id)
GROUP BY spec_name
ORDER BY MIN(spec_Id)
Hope this helps you.
You are looping through item_id for each of your <tr> rows. Instead you should be looping through spec_name for <tr>, and for each cell <td> loop through the product.
In pseudo code:
<table>
<thead>
<tr>
<th> </th> <!-- Empty cell for spacer -->
for (item in item_list) {
<th>item.name</th>
}
</tr>
</thead>
<tbody>
<tr>
for (spec in spec_list) {
<td>spec.name</td>
}
for (item in item_list) {
<td>item.spec[spec.name]</td> <!-- display spec detail of each item -->
}
</tr>
</tbody>
</table>
You might have to restructure your data before looping it through the table.
Greeting everyone,
Currently i'm making a webpage that has the following functions:
When the administrator opens the page, admin will be seeing a form filled with these information from a database:
What this page does is that it shows how many video's each user has in the database and when the admin clicks on the desired user ID, a new page should open with the video's of that specific user ID. The " DONE" button is to return to the main page when the admin is done deleting video's.
Now, what I have done is that I've assigned an href link to the userID values that is being fetched from Database. The problem is that, I have no clue how to pass the selected value/string to the next page with href. I've tried with Session, but ended up getting the last variable processed in the WHILE loop instead of getting the clicked UserID. Below follows my php code of what I've done. Can anyone give me some tips on how to pass the clicked userID from one page to another with href, or is there another way to do this?
code= click here
ps: As everyone can see, my php coding needs some serious improvement. But i'm still trying to improve by doing these types of exercises.
<?php
include_once ("includes/db_connection.php");
$sql = "SELECT Users_UserID, count(Users_UserID) AS total FROM video GROUP BY Users_UserID";
$sql2="SELECT UserID, FirstName, LastName FROM users";
$result = $connection->query($sql);
$result2 = $connection->query($sql2);
?>
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td><form name="deleteSingleVideo" method="post" action="">
<table width="400" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td bgcolor="#FFFFFF"> </td>
<td colspan="4" bgcolor="#FFFFFF"><strong>Delete user video</strong> </td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">#</td>
<td align="center" bgcolor="#FFFFFF"><strong>First Name</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>Last Name</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>User ID</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>Amount of videos</strong></td>
</tr>
<?php
session_start();
if ($result->num_rows > 0) {
while (($row=$result->fetch_assoc())&& ($row2=$result2->fetch_assoc()) ) {
?>
<tr>
<td align="center" bgcolor="#FFFFFF"></td>
<td bgcolor="#FFFFFF"><center><?php echo $row2['FirstName']; ?></center></td>
<td bgcolor="#FFFFFF"><?php echo $row2['LastName']; ?></td>
<td bgcolor="#FFFFFF"><center><a href="DeleteVideo.php" target="_blank"><?php echo $row['Users_UserID'];
$_SESSION['id']=$row['id'] ?></center></td>
<td bgcolor="#FFFFFF"><center><?php echo $row['total'];?></a></center></td>
</tr>
<?php
}
}
?>
<tr>
<td colspan="5" align="center" bgcolor="#FFFFFF"><input name="Done" type="submit" id="Done" value="Done" </td>
</tr>
<?php
$connection->close();
if(isset($_POST['Done'])){
header( "Location: Home.php" );
}
?>
</table>
</form>
</td>
</tr>
</table>
<?php
?>
this is not a good use of session
use get method to send such data :
append the id to href url --->href="<?php echo "DeleteVideo.php?id="$row['id'] ?>";
get data in the next page by accessing global variable ---> $_GET['id']
..
In the DeleteVideo.php your variable is $_GET['id']
use this code
and that id value get in xyz.php
$value=$_request['id'];
or
$value=$_Get['id'];
I am fetching data from MySql and I am displaying it in a table. I would like that for each <td> that contains a certain id to display some extra info on mouseenter and hide it on mouseleave using jQuery. Here is the HTML output:
<table>
<tbody>
<tr>
<th>Option 1</th>
<th>Option 2</th>
<th>Option 3</th>
</tr>
<?php
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<td id="triggerTooltip"><?php echo $row['option1']; ?>
<div class="tooltip">
<p>Extra info</p>
</div>
</td>
<td><?php echo $row['option2']; ?></td>
<td><?php echo $row['option3']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
The default display property for the tool-tip is set to none. Here is the jQuery I am using:
$('#triggerTooltip').mouseenter(function() {
$(this).closest('.tooltip').show();
}).mouseleave(function() {
$(this).closest('.tooltip').hide();
});
I tried using $(this).find('.tooltip') and it works, but only for the first occurrence of the #triggerTooltip. I think I am getting it wrong. Can you please help me to figure this out? Thank you.
The above answer is correct here, this behaviour could also be implemented with CSS if you wanted, with a rule like:
.triggerTooltip .tooltip {
display: none;
}
.triggerTooltip:hover .tooltip {
display: block;
}
It seems that you are duplicating (or nplicating) ids. Don't duplicate ids! Use classnames instead.
$('.triggerTooltip').mouseenter(function() {
$(this).find('.tooltip').show();
}).mouseleave(function() {
$(this).find('.tooltip').hide();
});
HTML
<td class="triggerTooltip"><?php echo $row['option1']; ?>
<div class="tooltip">
<p>Extra info</p>
</div>
</td>
Try using jquery hover, which takes two functions as arguments, and remember that classes and IDs are different. IDs are meant to be unique on a page.
You can use:
$('#triggerTooltip').mouseenter(function() {
$(this).find('.tooltip').each(function() {$(this).show()});
}).mouseleave(function() {
$(this).find('.tooltip').each(function() {$(this).hide()});
});
I have a table structure similar to below:
<tr>
<td colspan="5">
TEST
</td>
</tr>
<tr id="abcd_<?php echo $id; ?>" style="display: none;">
<td colspan="5">
<span id="hidtb_<?php echo $id; ?>"></span>
</td>
</tr>
The table is within a loop and the value of $id changes. The second tr is set to display : block using javascript. But the <td colspan="5"> is not covering all the five <td>s, instead only one.
Why my colspan is not working?
This is the problem with display: block.
Please refer the below link
http://thedesignspace.net/MT2archives/000376.html#.UUrg3FfCd1u
If you are hiding tr, then use display: table-row instead of display: block to display that tr.
If you are hiding td, then use display: table-cell instead of display: block to display that td.
Use table-row, no block when styling a tr. Perfect!
I was looking at the usage of jquery filter for data attributes, in this case, tables containing three data variables, i.e, team, specialization and level. Please do let me know what the best approach is and what the typical usage methodology are.
Here is my code html:
<table data-team="<?php print $name['team']; ?>" data-specialization="<?php print $name['speciality']; ?>" data-level="<?php print $name['level']; ?>" cellpadding="0" cellspacing="0" border="0" width="670px" class="jobs"><tr><td>
<tr><td colspan="4"><strong><?php print $name['title'] ?></strong></td>
<td></td><td></td><td></td></tr>
<tr>
<td width="100">Location : </td>
<td colspan="3"><?php print ($name['location']);?> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> Job Code : </td>
<td width="460"><?php print $name['id'] ?></td>
<td></td>
<td></td>
<td><a data-action="showDesc,jumpTo" href="javascript:;" id="<?php print($name['id']);?>" class="more">More Details </a></td>
</tr></td></tr>
</table>
The javascript that I have I got from one other Stack Overflow question, and it works on showing based on one matching attribute, here is my code:
$("#search").click(function() {
var team=$('#selectOne').val();
var specialty=$('#selectTwo').val();
var level=$('#selectThree').val();
var teams=[];//
var special=[];
var level=[];
//teams=$('.jobs').data('team');
//alert(teams);
$(".jobs").hide();
$('.jobs').filter(function(){
return $(this).data('team') === team;
}).show();
});
});
I want to put all the data-team attributes into the array, iterate over it and then check if each table contains it, in which case to the next array, to check and so on. if the data values match then, show.
Turns out my error was just that I re-declared the variables team[]. so basically, this:
$('.jobs') .hide().filter('[data-team="'+team+'"][data-specialization="'+specialty+'"][data-level="'+level+'"]').addClass('num').show();
Works fine now.