www.webdeveloper.com
Results 1 to 4 of 4

Thread: Cannot make the Rowspan proper using jQuery

  1. #1
    Join Date
    Dec 2010
    Posts
    10

    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
    Attached Images Attached Images

  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
    10

    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
    315
    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 04:46 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

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



Recent Articles