By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,312 Members | 1,280 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,312 IT Pros & Developers. It's quick & easy.

Cannot make the Rowspan proper using jQuery

P: 55
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.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en">
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function() {
  9.    var count = $('tbody tr').length;
  10.    //alert("count is :"+count);
  11.    var arr = $("#t1 tr td:even").map(function() { return $(this).text(); }).get();
  12.  
  13.    //
  14.    alert("ddfdf"+arr);
  15.    //var uniarr = $.unique(arr).reverse();
  16.    //alert("uniarr"+uniarr);
  17.    //alert("ffgfgfgtech"+copy);
  18.  
  19.    for(var i=0;i<count;i++) {
  20.        var j = i+1;
  21.     rowspan = 1;
  22.     if(arr[j]==arr[i])
  23.     {
  24.       alert(arr[j]);
  25.       rowspan++;
  26.     }
  27.     //alert($("."+arr[i]).val());
  28.     //$("."+arr[i]:first).attr("rowspan",rowspan);
  29.  
  30.     //$("."+arr[i]:not(:first)").hide();
  31.  
  32.  
  33.    }
  34.  
  35.  
  36.  });
  37. /*window.onload=function() {
  38. var oTBODY=document.getElementsByTagName('tbody')[0];
  39. var aTR=oTBODY.getElementsByTagName('tr');
  40. aTR[1].removeChild(aTR[1].getElementsByTagName('td')[0]);
  41. var oTD=aTR[0].getElementsByTagName('td')[0];
  42. oTD.setAttribute('rowspan', 2);
  43. };*/
  44. </script>
  45.  
  46. </head>
  47. <body>
  48. <table border="1" cellpadding="10" cellspacing="0" summary="">
  49.     <thead>
  50.         <tr><th>Color</th><th>Item</th></tr>
  51.     </thead>
  52.     <tbody id="t1">
  53.         <tr><td class="Blue">Blue</td><td>Car</td></tr>
  54.         <tr><td class="Blue">Blue</td><td>Boat</td></tr>
  55.         <tr><td class="Blue">Blue</td><td>Motor</td></tr>
  56.         <tr><td class="Red">Red</td><td>Bus</td></tr>
  57.         <tr><td class="Yellow">Yellow</td><td>Scooter</td></tr>
  58.         <tr><td class="Yellow">Yellow</td><td>Bike</td></tr>
  59.     </tbody>
  60. </table>
  61. </body>
  62. </html>
Thannks,
Anes
Attached Images
File Type: jpg CurrentView.jpg (13.4 KB, 346 views)
File Type: jpg RequiredView.jpg (9.6 KB, 451 views)
Feb 15 '12 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
Quick outline of steps to take for one possible method:
1. Loop over the rows of the table.
2. Keep a variable and a count of the current colour and a reference to the 1st row of new colour.
3. When next row is same colour, remove cell and increment count.
4. When encountering a new colour, set rowspan of first td cell to the count.
Feb 27 '12 #2

Post your reply

Sign in to post your reply or Sign up for a free account.