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()});
});
Related
like i mention in the title i have a problem when i want to print a div> Containing another hidden div with javaScript the bootstrap styling gone
before pushing the print botton
after pushing the print botton
<script type="text/JavaScript">
function myPrint() {
var myPrintContent = document.getElementById('table');
var myPrintWindow = window.open('','','');
myPrintWindow.document.write(myPrintContent.innerHTML);
myPrintWindow.document.getElementById('hidden_div').style.display='block';
myPrintWindow.document.close();
myPrintWindow.focus();
myPrintWindow.print();
return false;
}
</script>
<div id=table>
<table class="table table-hover">
<div style="display: none;" id="hidden_div">
<h1>hi</h1>
</div>
<thead class="table-primary">
<tr>
<th scope="col">#</th>
<th scope="col">Nom Article</th>
<th scope="col">CIN du responsable</th>
<th scope="col">Date</th>
<th scope="col">Quantite</th>
<th class="text-center" scope="col" colspan="2" width="1%">Options</th>
</tr>
</thead>
<tbody class="table-light">
<?php while($donnees = mysqli_fetch_array($reponse3)){
$donnees1=mysqli_fetch_array(mysqli_query($con,"select NOM_ARTICLE from article where ID_ARTICLE = $donnees[1]"));
$login_cin=mysqli_fetch_array(mysqli_query($con,"select CIN from utilisateurs where ID_LOGIN = $donnees[2]"));
?>
<tr>
<th scope="row"><?php echo $donnees[0];?></th>
<td><?php echo $donnees1[0]; ?></td>
<td><?php echo $login_cin[0]; ?></td>
<td><?php echo $donnees[3]; ?></td>
<td><?php echo $donnees[4]; ?></td>
<td><img src="res\images\edit-icon.svg" height="30x" title="modifier"></td>
<td><a onclick="supprimer(<?php echo $donnees[0]; ?>)" href="#"><img src="res\images\delete-icon.svg" height="30x" title="supprimer"></a></td>
</tr>
<?php
}?>
</tbody>
</table></div>
Please move the hidden_div out from the table.
<div id="table">
<div style="display: none;" id="hidden_div">
<h1>hi</h1>
</div>
<table class="table table-hover">
<thead class="table-primary">
......
You can at least write the correct markup into the window you're opening, then provide the link to your CSS file (note that you'll need to put in the full URL):
<script>
function myPrint() {
var myPrintContent = document.getElementById('table');
var myPrintWindow = window.open('','','');
myPrintWindow.document.write('<html><head>');
myPrintWindow.document.write('<link rel="stylesheet" href="http://www.yourdomain.com/your/bootstrap/css/path/your-bootstrap-theme.css">');
myPrintWindow.document.write('</head><body>');
myPrintWindow.document.write(myPrintContent.innerHTML);
myPrintWindow.document.write('</body></html>');
myPrintWindow.document.getElementById('hidden_div').style.display = 'block';
myPrintWindow.document.close();
myPrintWindow.focus();
myPrintWindow.print();
return false;
}
</script>
Admittedly this is not the best way to print a webpage. As mentioned by #BenRondeau using #media print (learn more about media query here) to define a style specifically for printing is the appropriate method. Your current method might work, yes, but learn to do things the right way is always more beneficial in the long run.
With Bootstrap data tables, you need to use table-row instead of 'block'
This has been an issue I have experienced in the past, and that fixed it.
myPrintWindow.document.getElementById('hidden_div').style.display='table-row';
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.
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.
This is my form :
<div class="mutiple-array-form">
<?php $form = ActiveForm::begin(); ?>
<table id="sampleTbl", class="table table-striped table-bordered">
<thead>
<tr id="myRow">
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>william</td>
<td>32</td>
</tr>
<tr>
<td>Muli</td>
<td>25</td>
</tr>
<tr>
<td>Sukoco</td>
<td>29</td>
</tr>
</tbody>
</table>
<div class="form-group">
<?= Html::button('Create',['class' => 'btn btn-success _addNew', 'onclick' => 'myfunction()']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
Below is my Javascript code :
<?php
$script = <<< JS
function myfunction() {
alert(document.getElementById("sampleTbl").rows.namedItem("myRow").innerHTML);
}
JS;
$this->registerJs($script);
?>
My code does not work. When I click button, nothing happens. For example, I want to show table value using array in alert. Please help!
What you are trying won't work because somehow declaring the function in inline script in yii2 doesnt work,i dont know proper reason of it and i am trying to find the reason.
Now your code will work if you write your script like this
<?php
$script = <<< JS
$('#idOfButton').click(function(){
alert(document.getElementById("sampleTbl").rows.namedItem("myRow").innerHTML);
});
JS;
$this->registerJs($script);
?>
And it will only print the value of your header
Now if you want the data of the table inside as an array and alert it, try this code
<?php
$script = <<< JS
$('#idOfButton').click(function(){
var myTableArray = [];
$("table#sampleTbl tr").each(function () {
var arrayOfThisRow = [];
var tableData = $(this).find('td');
if (tableData.length > 0) {
tableData.each(function () {
arrayOfThisRow.push($(this).text());
});
myTableArray.push(arrayOfThisRow);
}
});
alert(myTableArray);
});
JS;
$this->registerJs($script);
?>
And i would suggest that you use AppBundle to use script that way you will be able to debug the code via browser and figure out the problem yourself,which will help you find the answer.
I'm writing something fairly basic; however for some reason the jquery .click() is not working. Here is my code:
<?php for($r=0; $r<count($result); $r++){?>
<tr>
<?php for($c=0; $c<9; $c++){?>
<td><?php echo $result[$r][$c];?></td>
<?php }?>
<td><button name="edit<?php echo $r;?>">edit</button></td>
</tr>
<?php }?>
and
$('button[name*="edit"]').click(function(){
var row= $(this).parent().parent();
alert($(this).val());
});
If anyone can help me with this it would be greatly appreciated.
See this: jsfiddle
Note that it alerts the id of the containing row and the text value of the button.
HTML:
<table>
<tr id='foo'>
<td>1</td>
<td>
<button name="editg">edit</button>
</td>
</tr>
</table>
Javascript:
$('button[name*="edit"]').click(function(){
var $row= $(this).parent().parent();
alert($row.attr('id'));
alert($(this).text());
});
Alerts: -
"edit"
"foo"
In your example, did you mean:
alert($(this).text());
there is no val() on button.
If this does not answer your question, then perhaps you can change the fiddle to show the problem happening.
Update
See this: jsdfiddle
This uses $(function() in case your javascript is in head.