I'm a bit limited in being able to get what I want and I am hoping maybe there is a way to do this, either with CSS (which I doubt) or javascript.
I have a table as seen below where drupal will assign the link an "active" class. This is great, but I would like to change the CSS of the entire row that the active link is in and I just can't automate that with drupal. Is there anyway to see which page the user is on and then add a class or id to the row (tr) that has the current link?
<table class="views-table cols-0" thmr="thmr_80">
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-counter">
Link 1
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">
Link 2
</td>
</tr>
</tbody>
</table>
To add a class to the row based on the active anchor, you could use closest() (if using jQuery), and just style the class you decide to give that row with CSS.
$(function() {
$('.views-table a.active').closest('tr').addClass('active_row');
});
CSS
.active_row {color: green; height: 300px;}
<script src="/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('td.views-field a.active').css("color","900");
});
</script>
<table class="views-table cols-0" thmr="thmr_80">
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-counter">
Link 1
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">
Link 2
</td>
</tr>
</tbody>
</table>
hope this helps
Related
I have this table, that should be a button that link to another page. The reason is that the values of the table should be changeable with data from a database. The parameter can be changes to pH for example and the Value to 7 or something. But the table/button shall link to the same page. Where it is possible to set the Target.
So far this i what i got:
<table class="Button" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
So how do i make it a link/button?
You can use onclick and redirect your page.
Or wrap your table with <a>
<table class="Button" onclick="location.href='yourpage.html'" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
The same way as anything else.
You put an <a> element (with an href attribute) around it.
Wrap it into a link element:
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
</a>
And if you wanna have a button, add a button element to that:
<button style="color:black; background-color:white; border-radius:5px;">
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
</a>
</button>
You can do it using javascript onClick event or put <a> tag around it
Html
<table class="button" onClick="linkTo('https://www.google.com')">
.
.
.
</table>
Java Script
<script>
function linkTo(var link){
window.location = link;
}
</script>
Css for mouse point
<style>
table.button{
cursor: pointer;
}
</style>
Is there any possibility to Highlight a table row without external JS Library but using just JavaScript?
<table>
<tr>
<th>Nom</th>
<th>n°</th>
</tr>
<tr class="item">
<td class="listeitem">Denis PAPIN</td>
<td class="listeitem">7</td>
</tr>
<tr class="item">
<td class="listeitem">Albert EINSTEIN</td>
<td class="listeitem">2</td>
</tr>
<tr class="item">
<td class="listeitem">Nikola TESLA</td>
<td class="listeitem">18</td>
</tr>
(…)
</table>
Add a class to the row you want to highlight? We need some context here. But yes it's entirely possible
I'm looking for a little jquery help to collapse/expand a table that I have on my site. I'd also like the table to start expanded.
Here is an example of a table I have:
<table class="table">
<caption>
<div class="video-header">Header</div>
</caption>
<tbody>
<tr class="video-row">
<td class="field-title"> Content </td>
</tr>
<tr class="video-row">
<td class="field-title"> More Content</td>
</tr>
</tbody>
</table>
I'd like it that when you click on the "Header" that it collapses the entire table, not just the row.
I've found the following example, but can't seem to translate it to my case.
Just write a click handler for the caption element
jQuery(function () {
$('table > caption').click(function () {
$(this).next().toggle();
})
})
Demo: Fiddle
because your table is generated dynamically, you should define a parent node in which the table is located. this parent node should always exist in the page and should NOT be generated dynamically.
<div id="table-container">
<table class="table">
<caption>
<div class="video-header">Header</div>
</caption>
<tbody>
<tr class="video-row">
<td class="field-title"> Content </td>
</tr>
<tr class="video-row">
<td class="field-title"> More Content</td>
</tr>
</tbody>
</table>
</div>
then bind click event on that parent node.
$("#table-container caption").on("click", function(){
$("#table-container table").css("display", "none");
});
Need a little help with jQuery and HTML(table).
Pls take a look at my jsfiddle page to see what I am gonna try to do.
http://jsfiddle.net/nori2tae/U25EK/
Each TD contains certain value (from 01 to 06) and has CLASS name which is related to its value and the lists of buttons above the TABLE.
When the page initially loaded, all those buttons are enabled that means all TABLE DATA are visible.
When I click to turn on/off the button, i want jQuery to observe ON/OFF status of buttons and if the status matches to the values of each table row, i want jQuery to toggleSlide(show/hide) TABLE ROW.
(sorry about my poor english and explanation...)
For example, if I turn off button01 the row1 will be hidden. Then I turn button4 and button6 off, the row5 will be hidden. And so on or vice versa...
HTML:
<ul id="listBtns">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
<table id="tblResult">
<thead>
<tr>
<th></th>
<th>01</th>
<th>02</th>
<th>03</th>
<th>04</th>
<th>05</th>
<th>06</th>
</tr>
</thead>
<tbody>
<tr>
<th>row1</th>
<td class="val01">01</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>row2</th>
<td class="val01">01</td>
<td class="val02">02</td>
<td class="val03">03</td>
<td class="val04">04</td>
<td class="val05">05</td>
<td class="val06">06</td>
</tr>
<tr>
<th>row3</th>
<td class="val03">03</td>
<td class="val05">05</td>
<td class="val04">04</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>row4</th>
<td class="val02">02</td>
<td class="val04">04</td>
<td class="val05">05</td>
<td class="val06">06</td>
<td></td>
<td></td>
</tr>
<tr>
<th>row5</th>
<td class="val04">04</td>
<td class="val06">06</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>row6</th>
<td class="val03">03</td>
<td class="val02">02</td>
<td class="val04">04</td>
<td class="val06">06</td>
<td class="val05">05</td>
<td></td>
</tr>
</tbody>
</table>
JS:
$('#listBtns a').click(function() {
$(this).toggleClass('on off');
//and some function continues...
});
I am kinda stack and only can come up with very poor and inefficient codes(that perhaps might not work completely...) and I dont know which jQuery selector to use. please help me out.
Thanx.
Need one line only --
$(function() {
$('#listBtns a').click(function() {
$(this).toggleClass('on off');
$("#tblResult tr").eq($(this).text()).toggle('on off');
});
});
See demo
This will work as long as text and row number matches.
You can also use some thing like below, give an id to your table like "my_table" so that in case of multiple table s in a page it will affect only specific table. and by using 2,3 you can refer row number #2 and #3 should be hide and #4, #5 means row number #4 and #5 should be
display.
$("#my_table tr:nth-child(2)").hide();
$("#my_table tr:nth-child(3)").hide();
$("#my_table tr:nth-child(4)").show();
$("#my_table tr:nth-child(5)").show();
Call it on click event of any thing and check.
My page has this design.
<tr id="master">
<td id="row1"> <textbot> </td>
<td id="row2"> <linkbutton> </td>
</tr>
I am cloning the same TR onclick of the link button and the current link button will be hidden. so a new row will be created.
consider I have cloned thrice
<tr id="master">
<td id="row1"> <textbot> </td>
<td id="row2"> <linkbutton> </td>
</tr>
<tr id="master">
<td id="row1"> <textbot> </td>
<td id="row2"> <linkbutton> </td>
</tr>
<tr id="master">
<td id="row1"> <textbot> </td>
<td id="row2"> <linkbutton> </td>
</tr>
Now I want to show the second row's link button.
I am trying with
$(this).parents('#master :last').prev().children('#row2).show();
But its not working.
You can't/shouldn't clone elements that have IDs, because IDs are supposed to be unique in a document. Although a browser will happily let you have the same ID twice, Javascript and jQuery do not forgive you for this and things will not work as expected. The proper way to group elements is by classes.
So if you switch your code to this:
<tr class="master">
<td class="row1"> <textbot> </td>
<td class="row2"> <linkbutton> </td>
</tr>
Your selector might look like this:
$('tr.master').eq(1).find('td.row2').show();
you know, ID must be unique .. so i recommend to change all id to class.
i think the syntax for parrent should :
$('#master:parent');