/    Sign up×
Community /Pin to ProfileBookmark

Show and hide rows of the table…..

I ahve this table as code shown below with buttons Up and down above and below the table respectively now whgat i want to do is that as I have ten enteries in the table.

I want to show only 6 of them at one go on a page and the rest 4 should be hidden and when I cliock the “down” button the next four should be displayed and vice versa when I click “up” button the first 6 should be displayed.

[code]
<div >
<input type=”button” id=”up” value=”up”/>
<?php

$input = array(‘one’, ‘two’, ‘three’, ‘four’, ‘five’, ‘six’, ‘seven’, ‘eight’, ‘nine’, ‘ten’);
$cols = 1;

echo ‘<table style= “background-color:#0066CC;overflow-y: scroll;border:5;bordercolor:#FFFFFF;cellpadding:0;width:600px”>’;

for ($i=0; $i < count($input); $i++)
{
echo “<tr>”;

echo “<td>$input[$i]</td>”;
echo ‘<td width=”25″ align=”center” style=”background-color:#0000FF”><a href=”#” onClick=”AddtoPlayList(this);return false” > <img src=”graphics/1024×600/en/album-box.png” height=”60″ /></a></td>’;

echo “</tr>”;

}

echo “</table>”;

?>
<input type=”button” id=”down” value=”down”/>
</div>
[/code]

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@hcl_techauthorMar 15.2011 — I trie this thing but having error on the "up" and "down" condition
<i>
</i>var display=document.getElementById("TBL_List");
var PageNo = 0;
var row=display.getElementsByTagName("tr");

window.onload=function()

{
PageNo = 1;
click1=6;
for(var d=0;d&lt;row.length;d++)
{ <br/>
var l=row;
for(var t=click1;t&lt;l.length;t++)
{
l[t].style.display='none';

<i> </i> }
<i> </i>}

<i> </i>document.getElementById("btn_up").disabled = true;

<i> </i>click1++;

}

function fwdcondition()
{

<i> </i>document.getElementById("btn_up").disabled = false;
<i> </i>PageNo = 2;
<i> </i>start = 6*(PageNo-1)+1
<i> </i>End = PageNo*6;

<i> </i>for(var d=0;d&lt;row.length;d++)
<i> </i>{
<i> </i>var l=row;
<i> </i> for(var t=0;t&lt;start;t++)
<i> </i> {
<i> </i> l[t].style.display='none';

<i> </i> }
<i> </i> for(var t=start;t&lt;End;t++)
<i> </i> {
<i> </i> l[t].style.display='block';

<i> </i> }

<i> </i>}

<i> </i>PageNo++;

}

function precondition()
{
PageNo = Math.floor(row.length/6);
//alert(PageNo);
start = 6*(PageNo-1)+1
End = PageNo*6;

<i> </i>for(var d=0;d&lt;row.length;d++)
<i> </i>{
<i> </i>var l=row;
<i> </i> for(var t=start;t&lt;1;t++)
<i> </i> {
<i> </i> l[t].style.display='none';

<i> </i> }
<i> </i> for(var t=start;t&lt;End;t++)
<i> </i> {
<i> </i> l[t].style.display='block';

<i> </i> }

<i> </i>}

<i> </i>PageNo--;

}
Copy linkTweet thisAlerts:
@KorMar 15.2011 — Group you rows in TBODY elements

<i>
</i>&lt;table&gt;
&lt;tbody id="up"&gt;
[COLOR="DarkOliveGreen"]... rows (TR elements) here ...[/COLOR]
&lt;/tbody&gt;
&lt;tbody id="down"&gt;
[COLOR="DarkOliveGreen"]... rows (TR elements) here ...[/COLOR]
&lt;/tbody&gt;
&lt;/table&gt;


Now you cand refer the TBODY elements by their id and change their display.

[COLOR="Red"]IMPORTANT[/COLOR]: CSS standard [I]has not[/I] the value [B]block[/B] for the table or table elements. Only IE -> IE8 accept that. But you can use simply an empty value for a crossbrowser solution

<i>
</i>document.getElementById('up').style.display=""; [COLOR="DarkOliveGreen"]// that will be instead "block"[/COLOR]
×

Success!

Help @hcl_tech 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.21,
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,
)...