/    Sign up×
Community /Pin to ProfileBookmark

displaying large data using ‘+’ & ‘-‘ in a table

Copy linkTweet thisAlerts:
Oct 25.2004

Hai Guys,
I am a newbie to JavaScript and i want to code the page using javascript like this.i want to display the data in a tabular format. i am having a huge data to display the details of a customer.i need not scroll the page horizontally but i have to adjust in 3 rows(one row after the other). the table data should be coloured in such a way that there should be alternate color for every customer. I don’t want to display the whole data but only some data say non-comercial data.There will be a ‘+’ sign at the starting of the each row(for a particular customer) and when i click this it has to display the hidden data(i.e say commercial data).
how can i do this.
Plz help me..
Thanks & Regards,
Mahesh P

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesOct 25.2004 — You havent given enough information to be of much use exept to warn that using JavaScript could get you in trouble. Certain persons with disabilities cannot use JavaScript enabled browsers and so if your page is JavaScript dependent and you come under some disability law you will have broken that law. If you are in the United States and this is a commercial venture or if this is for an employeer of more than 15 persons then the Americans with Disabilities Act would apply.
Copy linkTweet thisAlerts:
@KorOct 25.2004 — Something like this?
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
a {
text-decoration: none;
}
td {
background-color: #CCCCCC;
}
-->
</style>

<script language="JavaScript" type="text/JavaScript">
function setUp(){
var d=document.getElementById('tab').getElementsByTagName('div');
var a=document.getElementById('tab').getElementsByTagName('a');
for(var i=0;i<d.length;i++){
d[i].style.display='none';
a[i].innerHTML='+';
}
}
function showT(aa){
var d=document.getElementById('tab').getElementsByTagName('div');
var a=document.getElementById('tab').getElementsByTagName('a');
var j= aa.parentNode.parentNode.rowIndex;
if(d[j].style.display=='none'){
setUp();
d[j].style.display='block';
a[j].innerHTML='-';
}
else{
d[j].style.display='none';
a[j].innerHTML='+';
}
}
onload=setUp;
</script>
</head>
<body>
<table id="tab" width="400" border="0" cellspacing="2" cellpadding="2">
<tr>
<td><a href="#" onclick="showT(this)">+</a> data 1 <div>Some text here<br>
text text</div></td>
</tr>
<tr>
<td><a href="#" onclick="showT(this)">+</a> data 2
<div>Some text here<br>
text text</div></td>
</tr>
<tr>
<td><a href="#" onclick="showT(this)">+</a> data 3
<div>Some text here<br>
text text</div></td>
</tr>
</table>

</body>
</html>
[/code]

for Charles

My variant still shows all the information for those with Javascript disabled... :p

Man...You are really mad with javascript enable/disable feathure...
Copy linkTweet thisAlerts:
@KorOct 25.2004 — or, a little bit "arranged":
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
a {
text-decoration: none;
}
td {
background-color: #CCCCCC;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
var a;var d;
function setObj(id,tag){
this.obj=document.getElementById(id).getElementsByTagName(tag);
return this.obj
}
function setUp(){
d= new setObj('tab','div')
a= new setObj('tab','a')
for(var i=0;i<d.length;i++){
d[i].style.display='none';
a[i].innerHTML='+';
}
}
function showT(aa){
var j= aa.parentNode.parentNode.rowIndex;
if(d[j].style.display=='none'){
setUp();
d[j].style.display='block';
a[j].innerHTML='-';
}
else{
d[j].style.display='none';
a[j].innerHTML='+';
}
}
onload=setUp;
</script>
</head>
<body>
<table id="tab" width="400" border="0" cellspacing="2" cellpadding="2">
<tr>
<td><a href="#" onclick="showT(this)">+</a> data 1 <div>Some text here<br>
text text</div></td>
</tr>
<tr>
<td><a href="#" onclick="showT(this)">+</a> data 2
<div>Some text here<br>
text text</div></td>
</tr>
<tr>
<td><a href="#" onclick="showT(this)">+</a> data 3
<div>Some text here<br>
text text</div></td>
</tr>
</table>

</body>
</html>
[/code]
×

Success!

Help @itsmaheshp 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...