SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member jlttb's Avatar
    Join Date
    Sep 2003
    Location
    Long Island, NY, USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Getting jQuery to apply styles after page load

    I'm using a function to display a table of data on a page (from an array that'll be linked), and using jquery to alternate the background-color of the rows.
    Readers will then have the option to search the data (not important here) and then to reload the original data. But when the original showAll() function is called from a click event, jQuery doesn't apply the background colors at all.

    Any suggestions as to how to 're-awaken' jQuery the second time the showAll() function gets called.

    Thanks - code below:


    Code:
    <html><head><title>Test</title>
    
    	<script src="http://i.cmpnet.com/channelweb/javascript/jquery/jquery.js" type="text/javascript"></script>
    	
    	<script type="text/javascript">
    	$(document).ready(function(){
    		$(".datarow:nth-child(even)").css("backgroundColor","#ccff00");
    		$(".datarow:nth-child(odd)").css("backgroundColor","#ccffff");
    	});
    	</script>
    	
    	<script type="text/javascript">
    	function showAll() {
    	var newcode = "";
    		for (i=1; i<7; i++) {
    		newcode = newcode + "<div class='datarow'>Data Here<\/div>";
    		}
    	document.getElementById('datas').innerHTML = newcode;
    	}
    	</script>
    
    </head>
    <body bgcolor="ffffff">
    
    	<form><input type="button" value="Show All" onClick="showAll()"></input></form>
    	<div id="datas" style="width: 300px; height: 400px; "></div>
    	<script language="javascript" type="text/javascript">showAll();</script>
    
    </body></html>

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the problem is that there is nothing about background colors in your showAll function. Background setting code was called once document was ready, but it will not apply to newly added rows, if you don't call it specifically again.
    I would move code below to your showAll function and see if it works (since your are calling showAll at load time anyway, I think you don't need to have it in ready function then).
    $(".datarow:nth-child(even)").css("backgroundColor","#ccff00");
    $(".datarow:nth-child(odd)").css("backgroundColor","#ccffff");

  3. #3
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  4. #4
    SitePoint Member jlttb's Avatar
    Join Date
    Sep 2003
    Location
    Long Island, NY, USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works! Thanks so much igv, and thanks for the link blain!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •