Cannot make the Rowspan proper using jQuery

**admod** · 02-15-2012 05:30 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 Current View and my Required view , please reply me ASAP.

Thannks,
Anes

**jadhav.soma** · 02-15-2012 05:50 AM

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

**admod** · 02-15-2012 11:00 AM

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

**Ayşe** · 02-15-2012 04:36 PM

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>

Thread: Cannot make the Rowspan proper using jQuery

Thread Tools

Display

Cannot make the Rowspan proper using jQuery

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions