www.webdeveloper.com
Results 1 to 4 of 4

Thread: Cannot make the Rowspan proper using jQuery

Hybrid View

  1. #1
    Join Date
    Dec 2010
    Posts
    12

    Cool Cannot make the Rowspan proper using jQuery

    Hi Friends,
    I have a doubt regarding How to do a thing ..... I need to make a admin display page
    like

    Color Item
    ========
    Blue Car
    --------------------
    Blue Pen
    --------------------
    Blue Xylophone
    ---------------------
    Red Camera
    ---------------------

    it must show as


    Color Item
    ========
    Car
    Blue Pen
    Xylophone
    ---------------------
    Red Camera
    ---------------------


    I attach my Current code , pls help to make it in second form.



    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
       var count = $('tbody tr').length;
       //alert("count is :"+count);
       var arr = $("#t1 tr td:even").map(function() { return $(this).text(); }).get();
       
       //
       alert("ddfdf"+arr);
       //var uniarr = $.unique(arr).reverse();
       //alert("uniarr"+uniarr);
       //alert("ffgfgfgtech"+copy);
       
       for(var i=0;i<count;i++) {
       	var j = i+1;
    	rowspan = 1;
    	if(arr[j]==arr[i])
    	{
    	  alert(arr[j]);
    	  rowspan++;
    	}
    	//alert($("."+arr[i]).val());
    	//$("."+arr[i]:first).attr("rowspan",rowspan);
    	
    	//$("."+arr[i]:not(:first)").hide();
    
    	
       }
       
    
     });
    /*window.onload=function() {
    var oTBODY=document.getElementsByTagName('tbody')[0];
    var aTR=oTBODY.getElementsByTagName('tr');
    aTR[1].removeChild(aTR[1].getElementsByTagName('td')[0]);
    var oTD=aTR[0].getElementsByTagName('td')[0];
    oTD.setAttribute('rowspan', 2);
    };*/
    </script>
    
    </head>
    <body>
    <table border="1" cellpadding="10" cellspacing="0" summary="">
        <thead>
            <tr><th>Color</th><th>Item</th></tr>
        </thead>
        <tbody id="t1">
            <tr><td class="Blue">Blue</td><td>Car</td></tr>
            <tr><td class="Blue">Blue</td><td>Boat</td></tr>
            <tr><td class="Blue">Blue</td><td>Motor</td></tr>
            <tr><td class="Red">Red</td><td>Bus</td></tr>
            <tr><td class="Yellow">Yellow</td><td>Scooter</td></tr>
            <tr><td class="Yellow">Yellow</td><td>Bike</td></tr>
        </tbody>
    </table>
    </body>
    </html>
    I attach Current View and my Required view , please reply me ASAP.



    Thannks,
    Anes

  2. #2
    Join Date
    Feb 2012
    Posts
    61
    try this one................

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    var count = $('tbody tr').length;
    //alert("count is :"+count);
    var arr = $("#t1 tr td:even").map(function() { return $(this).text(); }).get();

    //
    alert("ddfdf"+arr);
    //var uniarr = $.unique(arr).reverse();
    //alert("uniarr"+uniarr);
    //alert("ffgfgfgtech"+copy);

    for(var i=0;i<count;i++) {
    var j = i+1;
    rowspan = 1;
    if(arr[j]==arr[i])
    {
    alert(arr[j]);
    rowspan++;
    }
    //alert($("."+arr[i]).val());
    //$("."+arr[i]:first).attr("rowspan",rowspan);

    //$("."+arr[i]:not(:first)").hide();


    }


    });
    /*window.onload=function() {
    var oTBODY=document.getElementsByTagName('tbody')[0];
    var aTR=oTBODY.getElementsByTagName('tr');
    aTR[1].removeChild(aTR[1].getElementsByTagName('td')[0]);
    var oTD=aTR[0].getElementsByTagName('td')[0];
    oTD.setAttribute('rowspan', 2);
    };*/
    </script>

    </head>
    <body>
    <table border="1" cellpadding="10" cellspacing="0" summary="">
    <thead>
    <tr><th>Color</th><th>Item</th></tr>
    </thead>
    <tbody id="t1">

    <tr><td class="Blue" rowspan="2">Blue</td><td>Car</td></tr>
    <tr><td>Motor</td></tr>


    <tr><td class="Red">Red</td><td>Bus</td></tr>

    <tr><td class="Yellow" rowspan="2">Yellow</td><td>Scooter</td></tr>
    <tr><td>Bike</td></tr>

    </tbody>
    </table>
    </body>
    </html>

    thanks,
    Som

  3. #3
    Join Date
    Dec 2010
    Posts
    12

    Cool

    Hi som,
    Thanks for your reply, but dear i am not mean to edit HTML file any way...
    I got this value from Database table , So that data is a dummy one .... I need
    a solution if any dynamic data come on that location .... I expect you understand my doubt...

    Thanks,
    Anes

  4. #4
    Join Date
    Sep 2007
    Posts
    390
    If I understand.
    I try this code.
    This code is working in firefox 4.0b9. This code is not working in Konqueror 4.5.5
    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript">
    // http://www.webdeveloper.com/forum/showthread.php?t=256793
    
    $(document).ready(function() {
    
     var arr = $("#t1 tr td:even").map(function() { return $(this).text(); }).get();
    // var odd= $("#t1 tr td:odd").map(function() { return $(this).text(); }).get();
     // alert(odd);
       //
    //alert("arr=  "+arr);
    var str= arr.join('');
    //alert("str = " + str);
    // alert("$ = "+$);
    var uniarr = $.unique(arr).reverse();
    /*
    alert("uniarr"+uniarr);
    alert("uniarr[0] =  "+uniarr[0]);
    alert("uniarr[1] =  "+uniarr[1]);
    alert("uniarr[2] =  "+uniarr[2]);
    
    // http://www.w3schools.com/jsref/jsref_match.asp
    
    alert("class=Blue  :  " + str.match(new RegExp(uniarr[0],'g')).length);
    alert("class=Red   :  " + str.match(new RegExp(uniarr[1],'g')).length);
    alert("class=Yellow : " + str.match(new RegExp(uniarr[2],'g')).length);
    */
    var A = [];
    for(var n =0; n<uniarr.length; n++) {
    A[A.length]= str.match(new RegExp(uniarr[n],'g')).length
    }
    alert("A=  "+A); // 3, 1, 2
    
    // http://www.w3schools.com/jsref/prop_tabledata_rowspan.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_th_rowspan
    // http://www.w3schools.com/jquery/jquery_ref_selectors.asp
    
    
    /*
    $('.Blue:not(:first)').remove();
    $('.Red:not(:first)').remove();
    $('.Yellow:not(:first)').remove();
    alert("...");
    $('.'+uniarr[0]+':eq(0)').attr('rowSpan',A[0]);
    $('.'+uniarr[1]+':eq(0)').attr('rowSpan',A[1]);
    $('.'+uniarr[2]+':eq(0)').attr('rowSpan',A[2]);
    */
    
    for(var k=0; k<A.length; k++) {
    $('.'+uniarr[k]+':eq(0)').attr('rowSpan',A[k]);
    $('.'+uniarr[k]+':not(:first)').remove();
    }
    alert($('#t1').html());
    
    });
    
    </script>
    
    </head>
    <body>
    <table border="1" cellpadding="10" cellspacing="0" summary="">
        <thead>
            <tr><th>Color</th><th>Item</th></tr>
        </thead>
        <tbody id="t1">
            <tr><td class="Blue">Blue</td><td>Car</td></tr>
            <tr><td class="Blue">Blue</td><td>Boat</td></tr>
            <tr><td class="Blue">Blue</td><td>Motor</td></tr>
            <tr><td class="Red">Red</td><td>Bus</td></tr>
            <tr><td class="Yellow">Yellow</td><td>Scooter</td></tr>
            <tr><td class="Yellow">Yellow</td><td>Bike</td></tr>
        </tbody>
    </table>
    </body>
    </html>
    Last edited by Ayşe; 02-15-2012 at 05:46 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.12451 seconds
  • Memory Usage 2,999KB
  • Queries Executed 13 (?)
More Information
Template Usage (30):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (4)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (4)postbit
  • (4)postbit_onlinestatus
  • (4)postbit_wrapper
  • (1)showthread_list
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (27):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./includes/functions_threadedmode.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids_threaded
  • showthread_threaded_construct_link
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates