/    Sign up×
Community /Pin to ProfileBookmark

Cannot make the Rowspan proper using jQuery

Copy linkTweet thisAlerts:
Feb 15.2012

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>[/code]

I attach Current View and my Required view , please reply me ASAP.

Thannks,
Anes ?

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@jadhav_somaFeb 15.2012 — 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
Copy linkTweet thisAlerts:
@admodauthorFeb 15.2012 — 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 ?
Copy linkTweet thisAlerts:
@Ay__351_eFeb 15.2012 — 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

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
// 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&lt;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&lt;A.length; k++) {
$('.'+uniarr[k]+':eq(0)').attr('rowSpan',A[k]);
$('.'+uniarr[k]+':not(:first)').remove();
}
alert($('#t1').html());

});

&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;table border="1" cellpadding="10" cellspacing="0" summary=""&gt;
&lt;thead&gt;
&lt;tr&gt;&lt;th&gt;Color&lt;/th&gt;&lt;th&gt;Item&lt;/th&gt;&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody id="t1"&gt;
&lt;tr&gt;&lt;td class="Blue"&gt;Blue&lt;/td&gt;&lt;td&gt;Car&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="Blue"&gt;Blue&lt;/td&gt;&lt;td&gt;Boat&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="Blue"&gt;Blue&lt;/td&gt;&lt;td&gt;Motor&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="Red"&gt;Red&lt;/td&gt;&lt;td&gt;Bus&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="Yellow"&gt;Yellow&lt;/td&gt;&lt;td&gt;Scooter&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="Yellow"&gt;Yellow&lt;/td&gt;&lt;td&gt;Bike&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @admod spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.22,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...