jquery selector needed to select all certain children of parent - javascript

I have a page with some tables on it. In each table the first row is normal but the rest of the rows have a class of hidden so that they are not displayed on load. In one of the cells on the first row of the table there is a link to click to view more details (fade in the hidden rows of that table). I'm struggling to get this to work though. So basically I need a selector that will find all the hidden rows that are in the same table as the element that's clicked so that they can be faded in. I have used:
$(.hidden).fadeIn()
but because there is more than one table on the page it fades in all the hidden rows in all of the tables, I just want the ones in the specific table. I also used:
$(this).closest('tr').next(".hidden").fadeIn("slow")
which was half there, but it only fades in the first hidden row in that table but if there's more than one then the rest are still hidden. Any help would be much appreciated. Thanks

Try -
$(this).closest('tr').nextAll(".hidden").fadeIn("slow");
Detailed documentation of nextAll -
http://api.jquery.com/nextAll/

is that so, right?
<table>
<tr>
<td><span class="show">View more details</span></td>
</tr>
<tr class="hidden">...</tr>
....
</table>
then
<script type="text/javascript">
$(document).ready(function() {
$(".show").click(function() {
$(this).closest('table').find('tr.hidden').fadeIn("slow");
});
});
</script>

Related

Deleting previous table when selecting a new table

<div id="dropdown" class="dropdown-content">
Table
</div>
In my program I have a button, where a user will select a table and then that table will be displayed. Currently, when a second selection is made, it just adds a table beneath the first table. I would like to just display the current selection. I have tried this:
<div id="dropdown" class="dropdown-content" syle="clear:both;">
Table
</div>
And it did nothing. I also tried using a clearfix to no avail. Any help would be greatly appreciated.
Using style="display:none" on the table you wish to hide will work.
You could create a function that can easily turn the visibility of just one table on and off depending on the button you click but without your Javascript, I can't really help you.
Feel free to tag me or message me back when you have put in the Javascript and I can try to help you right a function that will do it for you :)
1- Give every table an ID :
<table id="table1">..</table>
<table id="table2">..</table>
2- In the click handler of your button use the id to hide the table, let's say you want to hide table1
document.getElementById("table1").style.display = "none"
You can also use JQuery functions : hide()
You can either use JQuery function .empty() to delete the previously created table, or use .hide() [to hide the table] and .show() [if u ever need to display the table again].
But,if you post your script,it'll be easier to give a correction,instead of a different solution.

Toggle visibility of multiple table-rows with specified <tr class="xxx"> by button (more/less details)

There are tons of jQuery accordions to toggle single rows or lines. But i need one, which can toggle multiple table-rows with a specified TR-class (tr class="xxx") by an "show more/less details"-button at once.
I want to start, showing a table with basic information only (few rows). On button-click, the hidden rows between the invisible ones should be shown.
Can't find anything like that.
Has anyone any idea?

jquery splash screen for editing page information

I have a list of users in an organized table. I want a splash-style div to appear when I click on the row of the user whose information I want to edit. When the splash screen appears, I want to have input boxes within the splash to contain the information of the user. So far I accomplished the splash screen effect. Now the final piece is grabbing the data within the row using the same onclick event as the splash, getting the values of the columns, and changing the innerHTML of the input boxes within the splash.
http://jsfiddle.net/nH6x6/1/
SOLUTION: http://jsfiddle.net/nH6x6/3/
<tr class="data" id="row1">
<td>1</td>
<td>Marquezso</td>
<td>123456</td>
<td>noob#coder.com</td>
</tr>
in the fiddle you have to click on the row to activate the splash.
I want the username and email input fields to contain the data of the clicked row.
In this case row1
=)
You will need to reference the relevant td element and grab its contents.
For example:
$('input[name="username"]').val($('#row1 td:first').text());
I gave a name to your input in the above example as it makes it easier to reference.
Here you go: http://jsfiddle.net/76bdx/3/
Here is a snippet, click fiddle to see everything...
//Fill the form
document.getElementById('username').value=$('.data td:nth-child(2)').html();
document.getElementById('email').value=$('.data td:nth-child(4)').html();
Gonna have to be a little trickier if your table ever holds more than one user row. New fiddle on the way for that... {never mind, already answered}

Dropdown for each cell in tabular data

I have a very large html table that is similar to the following:
<table>
<tr>
<td>value1</td>
<td>value2</td>
</tr>
<tr>
<td>value3</td>
<td>value4</td>
</tr>
</table>
For each value I need to have a dropdown, where a user can click to change the value. This would trigger an ajax function. What would be the best way to do this? A dropdown in each ? One dropdown that changes position? How should i go about adding this?
This solution changes the cell to a dropdown when clicked, and back to a cell when a value is selected, just in case this was desired effect.
Something similar to this, I would assume. :) I used jQuery. :)
$("tr").each(function(){
$("td").each(function(){
var before = $(this).text();
$(this).html("<select><option>"+before+"</option></select>");
});
});​
jsFiddle Example
Some of this depends on the experience you want for the user, but I would lean towards putting a select element in each table cell. You can then have the select hidden until the user selects one of the values to change, or you can have the select elements visible the entire time. This is easier because you can put the values into the select box before the browser renders the page. If this is not usable, for example, if the browser has trouble rendering the page because of the size of the markup, then you could move to using a single select element.
If you use a single select box, that would require you to move it around to the correct cell, and also determine how to get the possible values into the select box. You could use a data attribute on your td tags to store the data, or you could make an ajax call. But that could be chatty if you go back to the server each time a cell needs to be edited. Basically this would be the harder option to get right.
Start with the simple way (select in each td). And if that proves to be problematic, move on to the harder one. That is what I would do.
Alright, I got it working. This is an alternative to my other answer.
This gets each tr to be a dropdown and the tds are the options. I used jQuery.
$("tr").each(function(i){
$("td").each(function(){
$(this).replaceWith("<option>"+$(this).text()+"</option>");
});
$(this).replaceWith("<select>"+$(this).html()+"</select>");
});
​
Updated jsFiddle Example

How to hide div if table row is empty?

I have a table on my page and I want to display a message telling the user that they need to create content before the table is visible.
Currently when the table is empty the user can still see the table headings (article, date added etc).
Using Jquery how would I hide the table and the div containing the table?
Do you know what I mean?
Like this:
$('table:not(:has(ContentSelector))').each(function() {
//This code will run for each empty table.
//`this` will be the <table> element
});
Where ContentSelector is a selector that matches the content in the table.

Categories

Resources