So I've made this table, and by using Javascript, I made them clickable.
My Javascript is the following:
function tdClick() {
$(document).ready(function() {
$('table td').click(function() {
var TJid = $(this).attr('id');
window.open(
'TestResults?ID=' + TJid,
'_blank' // <- This is what makes it open in a new window.
);
});
});
}
This Javascript is applied to this table <td>
function MakeTable($TestPlanData){
echo"
<tr>
<td class='font-weight-bold' scope='row' id=".$TestPlanData['TestJobId'].">".$TestPlanData['TestSuiteCollectionName']."</td>
<td id=".$TestPlanData['TestJobId'].">
<div class='row ml-1'>";
if ($TestPlanData['Passed'] != 0) {
echo"
<div class='col-xs-6 mr-1'>
<span class='bg-success rounded text-light font-weight-bold h6 p-2'>
".$TestPlanData['Passed']."
</span>
</div>";
}
echo"
</div>
</td>
<td id=".$TestPlanData['TestJobId']."><small class='text-muted'>".convertTimeZone($TestPlanData['Date'], 'UTC', 'Europe/Copenhagen')."</small></td>
<td id=".$TestPlanData['TestJobId']."><small class='text-muted'>".$TestPlanData['NameVersion']."</small></td>
</tr>
";
}
BUT at the moment when I hover my mouse over the <td> no URL is shown at the bottom of the browser, unlike if I use a tag. I can only make the tag apply to the text and not the whole rectangle/.
Is there a way to get this at the bottom of the page when I hover my mouse over each <td>?
You need "normal" <a> tags for this to work. Example:
tr td { width: 50%; }
tr th { background: #EEE; }
a { color: black; text-decoration: none; }
<table border="1">
<tr><th>Description</th><th>Link</th></tr>
<tr><td>First</td><td>Link 1</td></tr>
<tr><td>Second</td><td>Link<br/>with<br/>multiline<br/>text</td></tr>
<tr><td>Third</td><td>Link with long text with very long description and it will be wrapped automatically</td></tr>
</table>
As far as I know, it only works in <a> tags:
<html>
<div>Link 1</div>
<div onclick="window.open('index.php','_self')">Link 2</div>
</html>
Related
I have a simple table and I write some JS code in order to achieve that whole tr become a data-href. Everything works very nice except for one thing.
Now the whole row is clickable and that is fine, but there is a small issue, if you click on the delete button, it takes you to the update page (data-href), and I want to avoid that. So my question is how can I modify that code for the whole row to stay clickable except that delete button?
Here is my code:
$("tr").each(function() {
const $tr = $(this);
$tr.attr("data-href", $tr.find("a").attr("href"))
})
$('*[data-href]').on('click', function() {
window.location = $(this).data("href");
});
.modal {
padding:5px;
background-color:red;
color:#fff;
cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td> Age</td>
<td>
Update
<a data-toggle="modal" class="modal" data-target="#deleteModal">Delete</a>
</td>
</tr>
</table>
Can somebody try to help me with this?
To achieve this you can use the is() method to determine what element within the tr was clicked on. If it was an a element then you can prevent the window.location from being updated.
Also note that you can update the data-href of each tr using an implicit loop which makes the code slightly more succinct. Try this:
$('tr').attr('data-href', function() {
return $(this).find('a').attr('href');
});
$('*[data-href]').on('click', function(e) {
if (!$(e.target).is('a')) {
window.location.assign($(this).data("href"));
}
});
.modal {
padding: 5px;
background-color: red;
color: #fff;
cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>
Update
<a data-toggle="modal" class="modal" data-target="#deleteModal">Delete</a>
</td>
</tr>
</table>
I am new to Jquery, I have a requirement to show extra text only when mouse hover on the respective line
How can i change my jquery snippet without writing the same snippets 10 times for 10 different selectors
here the code:
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
jQuery(function() {
$("#demoTable1").hide();
$( "#demo1" ).mouseover(function() {
$("#demoTable1").show();
});
$( "#demo1" ).mouseout(function() {
$("#demoTable1").hide();
});
$("#demoTable2").hide();
$( "#demo2" ).mouseover(function() {
$("#demoTable2").show();
});
$( "#demo2" ).mouseout(function() {
$("#demoTable2").hide();
});
});
</script>
<style>
tr {
background: #b8d1f3;
}
td {
font-size: 12px;
color: #000;
}
</style>
</head>
<body>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
</body>
</html>
You can do this using pure CSS, just make sure the element you are wanting to show is directly after the parent.
.child {
display: none;
}
.parent:hover .child {
display: inline;
}
<div class="parent">Hover over me
<div class="child">I will appear</div>
</div>
You can something like:
$("[id^='demoTable']").hide();
$("[id^='demo']").mouseover(function() {
$(this).find("div").show();
});
$("[id^='demo']").mouseout(function() {
$(this).find("div").hide();
});
tr {background: #b8d1f3;}
td {font-size: 12px;color: #000;padding: 10px;}
div {padding: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
Parameterizing jquery should be easy. Give each td a class of 'demo' and the inner div a class of 'demoTable'. Then you can do somethingl ike this:
$( ".demo" ).mouseover(function() {
$(this).find(".demoTable").show();
});
$(".demo").mouseout(function() {
$(this).find(".demoTable").hide();
});
The technique you're looking for is called 'Don't Repeat Yourself', or DRY. The simplest way to achieve that in your case is to use class attributes to group elements with common functionality. You can then use DOM traversal within the event handlers attached to those elements to find the related content and amend it.
In this case you can use the hover() event to toggle() the child div element, something like this:
jQuery(function($) {
$(".demo").hover(function() {
$(this).find(".demo-table").toggle();
});
});
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>
With that being said, JS is not the best technology to use for this. CSS is far more appropriate, using the :hover pseudo-selector:
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
.demo:hover .demo-table { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>
I have a table with each row representing a song.
When a song is clicked, the parent td should be highlighted a light blue color with the .active class and if any song was highlighted previously the parent td's .active class should be removed.
This part works fine and is represented with this jquery:
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
I also want to have a next button and a previous button. This where I am having issues. When the next button is clicked, the next song on the list should be highlighted and the previously highlighted song should be unhighlighted (I am using the class .active to do the highlighting and unhighlighting). This part is not working:
$('#next_button').click(function(){
var current = $('td.active');
$('.songs').parents('td').removeClass('active');
current.nextAll('td:first').addClass('active');
});
Here is the jsfiddle link:
jsfiddle Link
Here is my html code:
<table id="song_table">
<thead id="song_thead">
<tr>
<th id="table_head">Songs</th>
</tr>
</thead>
<tbody id="song_tbody">
<tr>
<td class="td_songs">
<a class="songs">
1
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
2
</a>
</td>
</tr>
</tbody>
</table>
<div id="next_button">
<p id="next_text">Next Button</p>
</div>
Here is my css:
.active{
background-color: #D9FAFA;
}
table{
text-align: center;
height: 100px;
width: 200px;
}
#table_head{
text-align: center;
}
#next_button{
height: 100px;
width: 200px;
background-color: lightgreen;
}
Here is my jquery
$(document).ready(function() {
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function(){
var current = $('td.active');
$('.songs').parents('td').removeClass('active');
current.nextAll('td:first').addClass('active');
});
});
If you could help me solve this issue, I would greatly appreciate it. I feel like this should be so easy but I just can't seem to make it work.
Thanks!
The trick is to get the row index of the current song, add 1, and then do a modulo with number of rows that way if the current row+1 overflows the number of rows, it will start from the beginning:
$().ready(function() {
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function(){
//here .parent() will get the current <tr>
//.parent().index() will get the index of the current <tr>
var currentID = $('td.active').parent().index();
//here .parent() will get the <tr>
//.parent().parent() will get the <tbody>
//.parent().parent().children() will get all the rows
//.parent().parent().children().length will get the row count
var nextID=(currentID+1)%($('td.active').parent().parent().children().length)
$('.songs').parents('td').removeClass('active');
$('td').eq(nextID).addClass('active');
});
});
.active{
background-color: #D9FAFA;
}
table{
text-align: center;
height: 100px;
width: 200px;
}
#table_head{
text-align: center;
}
#next_button{
height: 100px;
width: 2d00px;
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="song_table">
<thead id="song_thead">
<tr>
<th id="table_head">Songs</th>
</tr>
</thead>
<tbody id="song_tbody">
<tr>
<td class="td_songs">
<a class="songs">
1
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
2
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
3
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
4
</a>
</td>
</tr>
</tbody>
</table>
<div id="next_button">
<p id="next_text">Next Button</p>
</div>
Something like this? http://jsfiddle.net/y5ntap04/3/
You needed to go up the DOM and then where all the siblings are, you can go to the next() one.
Plus added a previous button for you.
$().ready(function () {
$(".songs").click(function () {
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function () {
$('.songs').parents('td.active').removeClass('active').closest('tr').next().find('td').addClass('active');
});
$('#previous_button').click(function () {
$('.songs').parents('td.active').removeClass('active').closest('tr').prev().find('td').addClass('active');
});
});
in your code you have each td in its own tr meaning there is no next td to go to.
you should adjust your jquery to focus on the rows, as in this fiddle (shown below)
$().ready(function() {
$(".songs").click(function(){
$('.songs').parents('tr').removeClass('active');
$(this).parents('tr').addClass('active');
});
$('#next_button').click(function(){
var current = $('tr.active');
$('.songs').parents('tr').removeClass('active');
current.next('tr').addClass('active');
});
});
You'll also notice I'm using .next() which will just grab the next element or the next element which matches the argument (in this case tr) - no need to get all then restrict to just the first.
All this will make your fiddle behave as expected, however, if you want to target the td's within each of the tr's you'll have to add .find('td') to get the td out of the retrieved tr, like this. Here the only line that is changed is the one that adds the class on click of next, which is now: current.parent().next('tr').find('td').addClass('active');
Refactoring out $('.songs').parents('tr').removeClass('active'); into it's own function would also clear your code a bit and make it easier to follow, a good habit! (also +1 for using a variable to store a returned JQuery DOM object - var current = $('tr.active'); - another good habit for code clarity and efficiency, especially when you are deraling with more complicated DOM structures and functions)
I'm new to Javascript and I'm working on a project. Thanks to help from a online help website, I'm able to show/hide my table successfully.
When I click the h3 element, it opens up and append the anchor (in this situation, #1, #2, #3) to the URL.
I want to use this anchor element to open up the specific table from an external link from another web page. (e.g. at Home Page, I clicked on this testing.html#1, I want it automatically open the 1st table when I reach the page)
Thank you very much!
JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
CSS
<style>
#special1{ display: none }
h3 {text-align: center;
background-color: black;
color: white;
clear: both;
cursor: pointer; }
.newboxes {
display: none;
}
a {text-decoration: none;}
</style>
HTML
<a id="myHeader1" onclick="javascript:showonlyone('newboxes1');" href="#1"><h3>Table 1</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes1">
<tr>
<td>1</td>
</tr>
</table>
<a id="myHeader2" onclick="javascript:showonlyone('newboxes2');" href="#2"><h3>Table 2</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes2">
<tr>
<td>2</td>
</tr>
</table>
<a id="myHeader3" onclick="javascript:showonlyone('newboxes3');" href="#3"><h3>Table 3</h3></a>
<table border="1" align="center" cellspacing="10px"class="newboxes" id="newboxes3">
<tr>
<td>3</td>
</tr>
</table>
Note this only work if you are loading from a html page in the same domain.
JQuery's .load function is very versatile. To load the first table from testing.html, we can do:
$('#tableContainer').load('testing.html table:eq(0)');
2nd table:
$('#tableContainer').load('testing.html table:eq(1)');
and so on.
demo
Note that the 3 tables in the demo are loaded from here
If the URL ends with #1, and you need showonlyone('newboxes1') automatically executed:
if (window.location.hash.substr(1) == '1') {
showonlyone('newboxes1');
}
I have tabs one says 'Search' and the other says 'Tags'
Search is the default tab so it has a grey rounded edge table background while 'Tags' has a white rounded edge background.
I want to be able to put the mouse over 'Tags' and the background to change from white to grey. How is this done?
Here is the HTML code:
<div class="roundedcornr_box_407494">
<div class="roundedcornr_top_407494"><div></div></div>
<div class="roundedcornr_content_407494">
<font color="#ffffff" size="2" face="helvetica">
Search
</font>
</div>
<div class="roundedcornr_bottom_407494"><div></div></div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="margin-left:10px;" />
<center>
<table height="20" width="30" cellpadding="0" cellspacing="0">
<tr>
<td>
<center>
<div class="roundedcornr_box_235759">
<div class="roundedcornr_top_235759"><div></div></div>
<div class="roundedcornr_content_235759">
<font color="#585858" size="2" face="helvetica">
Tags
</font> </div>
<div class="roundedcornr_bottom_235759"><div></div></div>
</div>
</center>
</td>
</tr>
</table>
And CSS:
.roundedcornr_box_407494 {
background: #bdbdbd;
}
.roundedcornr_top_407494 div {
background: url(roundedcornr_407494_tl.png) no-repeat top left;
}
.roundedcornr_top_407494 {
background: url(roundedcornr_407494_tr.png) no-repeat top right;
}
.roundedcornr_bottom_407494 div {
background: url(roundedcornr_407494_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_407494 {
background: url(roundedcornr_407494_br.png) no-repeat bottom right;
}
.roundedcornr_top_407494 div, .roundedcornr_top_407494,
.roundedcornr_bottom_407494 div, .roundedcornr_bottom_407494 {
width: 100%;
height: 5px;
font-size: 1px;
}
.roundedcornr_content_407494 { margin: 0 5px; }
Thanks!
James
With :hover.
Sample:
http://jsfiddle.net/stKn3/
With Css
table:hover
{
background-color:gray;
}
or
table tr:hover
{
background-color:gray;
}
I think its better to have a single images as background(with corners #as you trying to do) of the tabs And changing the background image on mouseover event. Instead of splitting them and merging the pieces together again by div tags.
Follow these examples :
http://www.codefoot.com/javascript/script_image_textarea_mouseover.html
http://www.codebelly.com/javascript/backimagechange.html
Try this
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<td>Some data</td>
</TR>
OR
<table onMouseover="this.bgColor='#EEEEEE'" onMouseout="this.bgColor='#FFFFFF'">
</table>
EDIT:
Try this complete HTML.
<html>
<body>
<table >
<tr onMouseover="this.bgColor='#EEEE00'" onMouseout="this.bgColor='#FFFFFF'">
<td>
Some Data on table's first row
</td>
</tr>
</table>
</body>
</html>
It needs some modifications to use on your code. Try it on your own.