PDA

View Full Version : 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.




<!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 :eek:

jscheuer1
02-16-2012, 02:51 AM
<!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):


<!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 :)