JQuery :: Tables With Toggle - How To Style Parent Row

Mar 9, 2010

I've successfully set up a table with toggling rows and alternate colour, and everything is working decently. Now, I've tried to do a further step by trying to style the parent row who do have child differently from those who don't, so that the user immediatly knows where clicking will bring result and where not. How can I do it? I've tried with the : parent selector but nothing, still keep looking all the same.

Here's my starting code:
<script type="text/javascript" src="../catalogo/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('.parent')
.css("cursor","pointer")
.attr("title","Click to see")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide();
});
</script>
<script type="text/javascript" src="../catalogo/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{ $(".parent:even").css("background-color", "#FFFFFF");
$(".parent:odd").css("background-color", "#F2F1ED");
$(".child:even").css("background-color", "#FFFFFF");
$(".child:odd").css("background-color", "#FAFAFA");
$("a").click(function(event){
$('.parent').unbind('click');
});
});
</script>

One more detail: I've got a dynamically generated table (from MySQL db) with more than 1000 rows.

View 9 Replies


ADVERTISEMENT

JQuery :: Tables Sort/filter In Excel Style?

Sep 9, 2011

I must insert in my standard html tables, the possibility to sort/filter columns.... in excel style, like this.There is a plugin that allows you to make this thing?

View 3 Replies View Related

JQuery :: Nesting Tables - Exists In My Last Row - Parent Table

Jul 25, 2009

In my last row (parent Table) with colspan(tr), I have another Table (without any.attributes) which was generated by GridView, Paging enabled and located in footer ..

How do I know if that Table exists in my last row(parent Table).. this code won't work ..

View 7 Replies View Related

JQuery :: Toggle Class To Add New Style For Hyperlink?

Jul 31, 2011

I have about five <a> tags, I wanna set specific style for the clicked (selected) hyperlink a tag and the others unselected should have another style

so I have this style classes:

.AccordionContainer .menu_header {
cursor:pointer;
display:block;
background: #3f3c38;

[Code].....

View 1 Replies View Related

JQuery :: Toggle Style Of Four Input Buttons In Form

Mar 30, 2010

I am trying to toggle the style of 4 input buttons in a form. Option1 is set to display the active style on page load. Clicking a button makes it active (on) and the others inactive(off).

jQuery(document).ready(function() {
jQuery("#option1").removeClass("passive").addClass("active");
jQuery("#option1").click(function(){
jQuery("#option1").removeClass("passive").addClass("active");
jQuery("#option2, #option3, #option4").removeClass("active").addClass("passive");
});
jQuery("#option2").click(function(){
jQuery("#option2").removeClass("passive").addClass("active");
jQuery("#option1, #option3, #option4").removeClass("active").addClass("passive");
});
jQuery("#option3").click(function(){
jQuery("#option3").removeClass("passive").addClass("active");
jQuery("#option1, #option2, #option4").removeClass("active").addClass("passive");
});
jQuery("#option4").click(function(){
jQuery("#option4").removeClass("passive").addClass("active");
jQuery("#option1, #option2, #option3").removeClass("active").addClass("passive");
});
});

View 4 Replies View Related

JQuery :: Toggle CSS Visible Style On Hideable Element

Apr 16, 2011

$('.viewBookBtn').click(function() {
$(this).parent().parent().find('.hideable').toggle( // just the toggle function works fine
function(){
$(this).css('visibility', 'visible'); // but when defined it doesn't target the hideable classed element
}, function(){
$(this).css('visibility', 'hidden');
});});

View 4 Replies View Related

JQuery :: Toggle Checkbox When Parent Element Is Clicked

Aug 6, 2010

I have an <input type="checkbox"> whose immediate parent is an <a> tag. The <a> is significantly larger than the <input>.

I want the checkbox to toggle on/offwhether the <a> is clicked or the checkbox itself. I also wantto store the value of the checkbox after it changes.

This sounds simple butI'm having trouble with the event bubbling (as in, I don't understand it).

Here is my current code.

HTML:

View 4 Replies View Related

How To Remove Style From Parent Element

Dec 10, 2009

Any way to remove styling on a parent element with JS (as it can't be done in CSS). In a situation like this:
Code:
<p><img src="image1.gif"></p>
<p>Brutus aderat forti.</p>
<p><img src="image2.gif"></p>
<p>Caesar adsum jam.</p>

The <p> element has default padding, but I'd like to remove the padding when the <p> contains an image. This was my failed attempt to target the <p> element:
Code:
window.onload = paraPad;
function paraPad() {
var img = document.getElementsByTagName("img");
var imgpara = img.parentNode;
for (i=0; i<imgpara.length; i++) {
imgpara.style.padding = "0";
}}

View 2 Replies View Related

[FireFox] Parent Object For Style In Setter

Mar 9, 2006

this is my code:

CSSStyleDeclaration.prototype.__defineSetter__('di splay',
displaySetter);

function displaySetter(value) {
var parent = findParent(document, this);
if (parent) {
if (parent.tagName == 'TD'
&& value.toLowerCase() == 'inline' ) {
value = 'table-cell'
}
}
this.setProperty('display', value , 'important');
}


function findParent(obj, style) {
var nodes = obj.childNodes;
if (obj.style == style) {
return obj;
}
for(var i = 0; i < nodes.length; i++) {
var suBsearchResult = findParent(nodes[i], style);
if (suBsearchResult) {
return suBsearchResult;
}
}
return false;
}

As you can see each time I need to scan whole document for parent which I would like to avoid. Is there any other way to get an object on which style is applied to?

View 4 Replies View Related

Flashplayers Created Do Not Obey Style Attributes Of Parent

Oct 26, 2009

I'm having trouble with some flash players that don't abide by the style attribute of the div they're created in using Javascript. When the flash-players' source is hard-coded into the page source they render fine, but the more players, the more bloat as you can see in the source of the original page.

Example:
[URL]
Original Page with old code:
[URL]
The problem code:
<script type="text/javascript">
function clv(obj){
var strst="[URL]";
var strnm=obj; .....

View 1 Replies View Related

JQuery :: Obtain ORIGINAL Style Setting - And NOT Computed Style?

May 5, 2010

My understanding had been that $.css("width") would return the original user selected style, eg "100%" or "10em", and $.width() returned the computed width, always in "px". Not so, following the code through for .css(), it calls something called getComputedStyle and the only difference between the two functions turns out to be a post-fix of "px" on the .css() result - not very useful. I need to know whether my user has called me with a proportional dimension, or a fixed one. How to tell with jQuery?

View 1 Replies View Related

JQuery :: Implement Toggle Without Using Toggle Function?

Feb 22, 2011

I'm extremely new to jquery and trying to write a toggle function without using the built-in functionality. From what I've read, this should be a fairly straightforward exerciseHowever, I'm running an issue. My code doesn't seem to do anything. Not clear to me why because nothing is erroring out? Here's what I've got:

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // we will add our javascript code here

[code]....

View 1 Replies View Related

JQuery :: Using To Style List-style-type?

Oct 12, 2011

This is probably quite a simple problem but I can't figure out the answer. I'm working on a site that has news stories and events coming in. What I would like is to have the news stories to be styled with squares and events with discs for instance. I might be able to change the actual plug-in so the CSS affects this change, but I just wondered how I could change the list-style-type with jQuery.

[Code]...

View 3 Replies View Related

JQuery :: Element Overflows Containing Block When Parent Border/padding Change - Not When Parent's Margin Changes

Sep 24, 2011

Demonstration page: [url]

Adjust the CSS margins of the BODY element with the first slider. The yellow P (paragraph) element resizes to fit its smaller containing block, as I would expect.

Then, adjust the CSS border or padding of the BODY element with the second and third sliders. The P element does not resize, though its origin changes. Instead, it overflows its containing block.

Finally, adjust the margins again. The P element snaps back into its containing block.

As you can see from the source, this is jQuery 1.6.4 and jQueryUI 1.8 pulled from googleapis.com.

Edit: Client is Google Chrome16.0.889.0 dev-m.

View 2 Replies View Related

Hiding Code Between <style Type=text/css">...</style>

Apr 24, 2009

I have built a website and I wish to hide my code between "style type="text/css">....</style>

Is there a way to hide the code between it?

View 5 Replies View Related

Toggle Div, Loading Content Externally On Toggle

Sep 1, 2011

here is my scenario:

I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself).

The file that is loaded on toggle doesn't have to be PHP, but it would help a lot.

View 1 Replies View Related

JQuery :: How To Use Sortable Tables

Jan 13, 2011

i am new to Html and i am helping run a website for virtual golf. we were thinking of adding a Statistics page but would need the table used to be sortable so by hitting the header the column sorts the figures in order, the tablw would only be 50 rows and 8 columns. i have looked at the website [URL]../docs/but cant seem to sort out where to place things. a step by step guide would very much be appriciated.

View 6 Replies View Related

JQuery :: Same Th And Td Widths In Different Tables?

Jul 22, 2010

Ia have two different tables that are generated from an application.In the first one there are only <th> and the second one only <td>.I want the size of the first, second etc <td> to be equal to the corresponding <th>.I have managed to do that by putting ids in all of them and then make a function like:

$(function(){
takeHeight1 = $("#th1").width();
$("#td1").width(takeHeight1);[code]....

But I would like to do it more automatic...like without ids for each td and th

View 2 Replies View Related

JQuery :: Tablesorter With Multiple Tables?

May 15, 2009

I am trying to use the plugin tablesorter that has a pager, for one table in a page it works fine, but when I put two tables, the pager links [next, previous,....] for the first table is moved under the

[Code]...

View 1 Replies View Related

JQuery :: Nested Tables - TR Even / Odd Selector

Apr 1, 2011

I have a html page with nested tables (horrible I know, but none the less what has to be done).
Example:
<table class='parent_table'>
<caption>Title</caption>
<tr><td>
<table class='child_table'><tr>
<td>Build</td><td>32bit</td><td>64bit</td><td>Date</td>
</tr></table></td></tr>

I am using this jQuery:
$('.parent_table').find('tr:odd').addClass('alt');
However, the alt class is not being added to the parent tr tags...When I just do this:
$('.parent_table').find('tr').addClass('alt');
It successfully adds the alt class to all the parent_table tr tags...Why would that work, but the odd selector does not?

View 2 Replies View Related

JQuery :: Best Table Plugin For Large Tables?

Aug 17, 2009

I have approximately a 400-500 row table (2 of them) each with 12 columns of formatted content such as currency, percentage, name.

I tried this with [url] but it can't seem to handle that much data.

Does anyone have a good plugin for large data on the page? (and no not interested in paginating it really)

View 3 Replies View Related

JQuery :: Remove Rows From Tables According To Some Rules?

Aug 18, 2009

I have a table like this:

<table>
<tr class="item_collection_begin">
<td colspan="3"></td>
</tr>

[Code]....

To sum it up I have a rows that acts a header for a collection of item (class="item_collection_begin). Is there some way to click on a button and then all the items and their header (item_collection_begin), and their footer (item_collection_end, this is not mandatory that they have such one) are all hidden if there is no item in the collection where the cell (amount) is bigger than zero? I have got it to work for all the rows with items: $('#test .amount').filter(function (index) { return $(this).html() == 0; }).parent().remove(); But this does not hide item_collection_begin (and perhabs item_collection_end).

View 1 Replies View Related

JQuery :: TableSorter Cannot Handle Nested Tables?

May 11, 2009

Does tablesorter support nested tables? I'm only trying to sort the outer table, but tablesorter seems confused by tables nested within my <td>'s.

View 3 Replies View Related

JQuery :: Row Highlighting Slow On Large Tables?

May 26, 2011

I am pulling data from a database and putting it into a table, i'm using the following statement to add row hightlighting to make it easy to read. Everthing works fine with short tables, but for larger tables the highlighting lags severely, aside from manually adding the mouseover/mouseout directly in the output, is there any way to make this faster?

$("#totalcalldata tr").mouseover(function(){$(this).addClass("rowHilight");}).mouseout(function(){$(this).removeClass("rowHilight");});

View 1 Replies View Related

JQuery :: Snapping Effect With .slideDown() And Tables?

Nov 5, 2011

Not sure if this is a problem or I just need some help. I would like to have a table cell be able to slide down smoothly. The problem is that to calculate the height to slide down, it formats the text to some width (looks like the width of the browser window) other than the actual width of the cell. When it goes to do the slide, it uses this calculated height, and then snaps to the actual height based on the real width of the cell (this can go either up or down).

I have a very simple example below. Click on the first text string. There is no CSS, so that's not the problem. The table has a width on it. If your browser window is wide enough, it slides smoothly. If you make it narrow enough to what might make it wrap an additional line of text, you'll see it slide down smoothly to the pre-calculated height and than snap to the actual height. In this example, it will snap up because the width set on the table is wider than the browser window.

If no width is set on the table, it scrolls smoothly as expected. But in real life, we need to control the width of columns. Hopefully there is some approach I can apply to make this slide smoothly.

[Code]...

View 1 Replies View Related

JQuery :: Calculating Column Totals In Multiple Tables

Feb 24, 2010

I've managed in the past to cobble together a few simple scripts.

I have an html page, with numerous tables in this format:

<table class="tableClass" id="tableID">
<col class="date" />
<col class="reference" />
<col class="amount" />

[Code].....

This (apparently) totals all 'amount' cells in the page, and writes it in *all* the 'total' cells - close, but obviously I'm not correctly specifying that each total should be displayed in its parent.

View 6 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved