Cannot make the Rowspan proper using jQuery

**cent4u** · 02-15-2012, 11:41 AM

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 my Current and Require Image view below.

Thannks,
Anes

**jscheuer1** · 02-16-2012, 02:51 AM

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://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var colors = {}, td, color, p;
	$('#t1').find('tr').each(function(){
		if((td = $(this).find('td').get(0)) && (color = td.className)){
			colors[color] = colors[color]? colors[color] + 1 : 1;
		}
	});
	for (p in colors){
		if(colors[p] > 1){
			$('.' + p + ':gt(0)').remove();
			$('.' + p).attr('rowspan', colors[p]);
		}
	}
});
</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>

Or (using even more of jQuery):

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://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var colors = {}, td, color;
	$('#t1').find('tr').each(function(){
		if((td = $(this).find('td').get(0)) && (color = td.className)){
			colors[color] = colors[color]? colors[color] + 1 : 1;
		}
	});
	$.each(colors, function(color, num){
		if(num > 1){
			$('.' + color + ':gt(0)').remove();
			$('.' + color).attr('rowspan', num);	
		}
	});
});
</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>

**cent4u** · 02-16-2012, 08:54 AM

hi Sir,
Thanks alot for your good help , It's working fine for me .... Great job...

Thanks alot
Anes

Thread: Cannot make the Rowspan proper using jQuery

Thread Tools

Search Thread

Cannot make the Rowspan proper using jQuery

Bookmarks

Bookmarks

Posting Permissions