Firstly I must emphasis that the HTML is pre-generated and cannot be altered - Otherwise I would not be doing it in this way : )
So....
The script and HTML below creates a nice hide/show menu, when you click the navheader the navitem becomes visible.
However I want the css class of the navheader to change based on if navitem is directly below it.
e.g.
navheader (Change Class to linksbelow)
navitem
navheader (Change Class to NOlinksbelow)
navheader (Change Class to NOlinksbelow)
navheader (Change Class to linksbelow)
navitem
etc....
My HTML and JQUERY:
<script>
$(function() {
$('.Nav table .navitem').hide();
$('.Nav table.navheader').click(function() {
$(this).parent().parent().next().find(".navitem").slideToggle('100');
});
});
</script>
<div class="Nav">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table class="navheader">
<tr>
<td>
<a class="navheader" href="#">Header Link 1</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table class="navitem">
<tr>
<td>
<a class="navitem" href="#">Link 1</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="navheader">
<tr>
<td>
<a class="navheader" href="#">Header link 2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Ok, this specific case doesn't seem to work out when using only CSS selectors (as there's no such thing as a 'previous sibling selector'), so it'll have to be a little more complex:
$('.Nav tr:has(table.navheader)').each(function (i, elmnt) {
if($(elmnt).next().find('table.navitem').length > 0)
$(elmnt).find('table.navheader').addClass('linksbelow')
});
Related
When a cell is clicked the function is suppose to run.
Right now it is working only on the first row.
When i click on the button on a row i want that specific row to affect.
$(document).ready(function() {
function loadHistory() {
$('#btn').data('valType', 'more');
$('#btn').click(function() {
var id = $('#btn').data("valType")
})
}
})
In this case, use class selector, instead of id.
For example, yo have any list:
$(document).ready(function() {
$('.delete').click(function(e) {
$(this).parent().parent().remove();
})
})
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Chair
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Sofa
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Table
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Without the HTML code it is a bit more difficult to answer you, but I try.
Usually the ID is unique, so it's assigned to only one element, so try using the class selector.
Then another thing, I don't know if this is your case, if you go to create the other lines dynamically, the jQuery .click () function will not be able to manage the clicks on the elements created after loading the page. In this case use $.on('click', '.yourClass', function).
I hope I was helpful!
I want to remove class only selected row because in a laravel foreach loop I have multiple rows like this:
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
I wanted it so that if the user clicks on first row only, its class should be removed so I tried this:
$('.remove-d-none').on('click', function(){
$('.menu').removeClass('d-none');
});
But it doesn't seem to work. Does somebody know how to help?
$('.remove-d-none').on('click', function() {
$(this).siblings(".manue").removeClass("d-none");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
</table>
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>
I'm trying to make a show hide function for my table. The problem is that the jQuery only seems to work for the first selector and no others.
Can anyone help me with this problem?
jQuery :
jQuery("document").ready(function($) {
$("#paragraph-div").hide();
$("#toggle-div").click(function() {
if ($("#paragraph-div").is(":visible")) {
$("#paragraph-div").hide();
$("#toggle-div").val("Less Info");
} else {
$("#paragraph-div").show();
}
});
});
HTML :
<table>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a id="toggle-div">More Info</a>
<div id="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a id="toggle-div">More Info</a>
<div id="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a id="toggle-div">More Info</a>
<div id="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
</table>
Working fiddle
id should be unique in same document, replace the duplicate once by general class, e.g :
<a class="toggle-div">
<div class="paragraph-div">
Instead of :
<a id="toggle-div">
<div id="paragraph-div">
Then use class selector . in your js instead of id selector :
$(".toggle-div")
$(".paragraph-div")
Instead of :
$("#toggle-div")
$("#paragraph-div")
NOTES :
You could use $(this) inside event instead of ".toggle-div"
You should use $(this).next(".paragraph-div") to select the related paragraph with clicked link.
The div tag haven't a val() method you should use text() instead.
Hope this helps.
Snippet
jQuery("document").ready(function($) {
$(".paragraph-div").hide();
$(".toggle-div").click(function()
{
if ($(this).next(".paragraph-div").is(":visible")) {
$(this).next(".paragraph-div").hide();
$(this).text("More Info");
} else {
$(this).next(".paragraph-div").show();
$(this).text("Less Info");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>data</td>
</tr>
<tr>
<td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td>
</tr>
</table>
I think you're looking for something like this :
jQuery("document").ready(function($) {
$(".paragraph-div").hide();
$(".toggle-div").click(function() {
var $this = $(this);
var $paragraph = $this.next('.paragraph-div');
if ($paragraph.is(":visible")) {
$paragraph.hide();
$this.html("More Info");
} else {
$paragraph.show();
$this.html("Less Info");
}
});
});
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<table>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a class="toggle-div">More Info</a>
<div class="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a class="toggle-div">More Info</a>
<div class="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a class="toggle-div">More Info</a>
<div class="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
</table>
(see also this Fiddle)
please let me know how to remove class hide from nextall sublevel when click on mainlevel. It should not remove hide class from other sublevel which is next to mainlevel. please check the table structure below:
<table>
<tbody>
<tr>
<td>
<a class="mainlevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
<tr>
<td>
<a class="mainlevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
</tbody>
</table>
If interpret Question correctly ? , try using .closest() to select parent of clicked element , .nextUntil() , :has() to select tr elements until next mainlevel , .find() to select .hide elements , .toggle() to toggle display of hide elements
$(".mainlevel").click(function() {
$(this).closest("tr").nextUntil("tr:has(.mainlevel)").find(".hide").toggle()
})
.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<a class="mainlevel">click</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">a</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">b</a>
</td>
</tr>
<tr>
<td>
<a class="mainlevel">click</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">c</a>
</td>
</tr>
</tbody>
</table>