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
    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
    301
    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.
    İyiliği emret. Kötülükten alıkoy. (31/16)

    hasbunallahuVeNimelVekil++

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