Just nu i M3-nätverket
Jump to content
Eforum upphör 20 juni, klicka för att läsa vad som händer och om alternativ

Dölja flera rader!

henrikg

By henrikg,
in Webbutveckling

Recommended Posts

henrikg

henrikg

Posted
Posted

Jag har en tabell med ca 20 rader och 3 kolumner. Ovanför har jag en knapp som heter Dölj. När man klickar på den knappen vill jag att vissa tabellrader ska döljas. Vet någon hur man enkelt kan göra detta? Tacksam för svar!

 

Link to comment
Share on other sites
Mikael Ericsson

Mikael Ericsson

Posted
Posted

Gruppera raderna i TBODY-block och namnge dem.

Sedan kan du använda style.display='none' och style.display='block' för att dölja/visa raderna.

 

Link to comment
Share on other sites
henrikg

henrikg

Posted
  • Author
Posted

Hmm... Tack för ditt svar men jag är inte riktigt säker på vad du menar. Har du ngt exempel man kan kika på? Det vore super!

 

Link to comment
Share on other sites
Mikael Ericsson

Mikael Ericsson

Posted
Posted 

<a href="javascript:Visa();">Visa</a> <a href="javascript:Dolj();">Dölj</a>
<table border="0" cellpadding="2" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tbody id="rad1">
 <tr>
   <td width="33%">rad1</td>
   <td width="33%">rad1</td>
   <td width="34%">rad1</td>
 </tr>
</tbody>
<tbody id="rad2">
 <tr>
   <td width="33%">rad2</td>
   <td width="33%">rad2</td>
   <td width="34%">rad2</td>
 </tr>
</tbody>
<tbody id="rad3_4">
 <tr>
   <td width="33%">rad3</td>
   <td width="33%">rad3</td>
   <td width="34%">rad3</td>
 </tr>
 <tr>
   <td width="33%">rad4</td>
   <td width="33%">rad4</td>
   <td width="34%">rad4</td>
 </tr>
</tbody>
 <tr>
   <td width="33%">rad5</td>
   <td width="33%">rad5</td>
   <td width="34%">rad5</td>
 </tr>
 <tr>
   <td width="33%">rad6</td>
   <td width="33%">rad6</td>
   <td width="34%">rad6</td>
 </tr>
</table>
<script language="javascript">
function Visa() {
rad1.style.display='block';
rad2.style.display='block';
rad3_4.style.display='block';
}

function Dolj() {
rad1.style.display='none';
rad2.style.display='none';
rad3_4.style.display='none';
}
</script>

 

Link to comment
Share on other sites
  • 10 months later...
NoiseKiller

NoiseKiller

Posted
Posted

Funkar klockrent i IE men sämre i FireFox...

Finns det någon smidig lösning för FF också tro?

 

 

Link to comment
Share on other sites
zerblat

zerblat

Posted
Posted

Använd getElementById(), typ:

rad1 = getElementById("rad1");
rad1.style.display='block';

osv.

 

Link to comment
Share on other sites
NoiseKiller

NoiseKiller

Posted
Posted

Vad behövs det mer för förändringar än bara lägga till rad1 = getElementById("rad1"); osv..?

För det får jag varken att fungera i IE eller FF.

 

Problemet med föregående kod i FF är att när man Visar texten igen hamnar den underst på ny rad. Nästa gång man döljer och visar igen skapas ytterligare en ny radbryt osv.

 

| Noisekiller |

Pengar betyder inte ett lyckligt liv men bekvämlighet i ett olyckligt.

 

Link to comment
Share on other sites
zerblat

zerblat

Posted
Posted

Det heter förstås document.getElementById()... display: block blir knasigt eftersom tbody inte är nåt block-element. Egentligen är table-row-group det korrekta (http://www.w3schools.com/css/pr_class_display.asp), men det verkar inte stödjas av IE (http://www.blooberry.com/indexdot/css/properties/classify/display.htm). table-header-group stöds däremot av IE och verkar ha samma effekt som table-row-group (iaf i Firefox, jag har inte IE) så det kanske är ett alternativ.

 

[log]

<html>

<head>

<script type="text/javascript">

function Visa() {

rad1 = document.getElementById("rad1");

rad2 = document.getElementById("rad2");

rad3_4 = document.getElementById("rad3_4");

rad1.style.display='table-row-group';

rad2.style.display='table-row-group';

rad3_4.style.display='table-row-group';

}

 

function Dolj() {

rad1 = document.getElementById("rad1");

rad2 = document.getElementById("rad2");

rad3_4 = document.getElementById("rad3_4");

rad1.style.display='none';

rad2.style.display='none';

rad3_4.style.display='none';

}

</script>

</head>

<body>

<a href="javascript:Visa();">Visa</a> <a href="javascript:Dolj();">Dölj</a>

<table>

<tbody id="rad1">

<tr>

<td>rad1</td>

<td>rad1</td>

<td>rad1</td>

</tr>

</tbody>

<tbody id="rad2">

<tr>

<td>rad2</td>

<td>rad2</td>

<td>rad2</td>

</tr>

</tbody>

<tbody id="rad3_4">

<tr>

<td>rad3</td>

<td>rad3</td>

<td>rad3</td>

</tr>

<tr>

<td>rad4</td>

<td>rad4</td>

<td>rad4</td>

</tr>

</tbody>

<tr>

<td>rad5</td>

<td>rad5</td>

<td>rad5</td>

</tr>

<tr>

<td>rad6</td>

<td>rad6</td>

<td>rad6</td>

</tr>

</table>

</body>

</html>

[/log]

 

Link to comment
Share on other sites
NoiseKiller

NoiseKiller

Posted
Posted

Det där funkade klockrent i FF men inte IE. :)

Tack för hjälpen i vilket fall!

 

| Noisekiller |

Pengar betyder inte ett lyckligt liv men bekvämlighet i ett olyckligt.

 

Link to comment
Share on other sites
Anjuna Moon

Anjuna Moon

Posted
Posted
Det där funkade klockrent i FF men inte IE. :)

Det är för att du får namnkonflikter mellan variablerna och id:na. Döp om variablerna i javascriptet så funkar det:

[log]

function Visa() {
r1 = document.getElementById("rad1");
r2 = document.getElementById("rad2");
r3_4 = document.getElementById("rad3_4");
r1.style.display='table-row-group';
r2.style.display='table-row-group';
r3_4.style.display='table-row-group';
}

function Dolj() {
r1 = document.getElementById("rad1");
r2 = document.getElementById("rad2");
r3_4 = document.getElementById("rad3_4");
r1.style.display='none';
r2.style.display='none';
r3_4.style.display='none';
}

[/log]

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing


×
×
  • Create New...