First of all , please bear with me about my bad english :(
I am listing data in a table using for-each loop and above HTML will generate if use to slideToggle then it open fine.
but if another row open then last one still open , i want to open a new one but close previous.
function view_history_details ( ) {
$('#view-details').slideToggle();
}
<table>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
</table>
You can redesign the solution as below using jQuery event handlers.
We adds a class to the anchor elements which triggers the action, then use that class to register the click handlers. Inside the handler we toggles the next view-details row and hides all other view-details elements
jQuery(function($) {
$('.toggle').click(function(e) {
console.log(this)
e.preventDefault();
var $cur = $(this).closest('tr').next('.view-details').stop().toggle();
$('.view-details').not($cur).stop().hide();
})
})
.toggle {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
</table>
You need to pass particular control to your function so as to slideToggle only that control's view-details element as below:
function view_history_details (ctrl) {
$('.view-details').slideUp();
$(ctrl).closest('tr').next('.view-details').slideToggle();
}
and when calling function from td write it as below and pass this
<td>
<a href="javascript:;" onclick="view_history_details(this)" title="View" data-keyboard="false" ></a>
</td>
Repeat for all tds where view_history_details function call exists.
DEMO
function view_history_details (ctrl) {
$('.view-details').slideUp('fast');
$(ctrl).closest('tr').next('.view-details').slideToggle('slow');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
</table>
Related
I have a page with a table containing customer data like customer name, quantity, price, and status. The Table looks like this:
<table>
<tr>
<th>No</th>
<th>Customer</th>
<th>Quantity</th>
<th>Price</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Customer 1</td>
<td>5000</td>
<td>100000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Customer 2</td>
<td>2000</td>
<td>40000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Customer 3</td>
<td>3000</td>
<td>60000</td>
<td class="status-order">Delivered</td>
<td>
<a class="update btn btn-outline-primary">Update</a>
<a class="delete btn btn-outline-danger">Delete</a>
</td>
</tr>
</table>
I want to hide the Update button based on condition. Let's say the status is "Delivered", then the Update button does not appear. So I create a jQuery file like this:
$(".status-order").each(function() {
const status = $(this).text()
if (status == "Delivered"){
$(".update").hide()
console.log(true)
} else {
$(".update").show()
console.log(false)
}
})
After I try to refresh the page to see the result, the update button in each rows are hide. I know my jQuery that i create it's wrong, can you give me correct answer how to fix this? Thank you.
$(".update").hide() or $(".update").show() will both iterate through all elements matching .update and hide or show them. You only want to hide or show the .update that's in the current table row.
The .status-order you're iterating over is in a prior <td>, so use .next() to get to the next <td>, and then use .find('.update') on that to get to the descendant.
$(".status-order").each(function() {
const status = $(this).text();
const update = $(this).next().find('.update');
if (status == "Delivered") {
update.hide()
} else {
update.show()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>No</th>
<th>Customer</th>
<th>Quantity</th>
<th>Price</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Customer 1</td>
<td>5000</td>
<td>100000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Customer 2</td>
<td>2000</td>
<td>40000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Customer 3</td>
<td>3000</td>
<td>60000</td>
<td class="status-order">Delivered</td>
<td>
<a class="update btn btn-outline-primary">Update</a>
<a class="delete btn btn-outline-danger">Delete</a>
</td>
</tr>
</table>
here i want to remove a specific class from a <td><td> inside table and i have a another table in which i have a button and by clicking on this button i want to remove class of <td><td> which is in different table.
My HTML is As Like
<table id="test">
<tr>
<td class="background"></td>
<td></td>
<td class="background"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="background"></td>
<td class="background"></td>
<td class="background"></td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
Jquery Code am trying is
$("#Close").click(function () {
$('#test', 'tr','td').removeClass("background");
});
Try this:
$("#Close").click(function () {
$('#test td').removeClass("background");
});
$('#test td').removeClass('background');
Maybe this will help:
document.getElementById('tdid').className = '';
$("#Close").click(function() {
$('.background').removeClass("background");
});
.background {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
<tr>
<td class="background">1</td>
<td>1</td>
<td class="background">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td class="background">1</td>
<td class="background">1</td>
<td class="background">1</td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
If you want to remove all then select the class then remove that class.
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>