Just nu i M3-nätverket
Jump to content

Dölja flera rader!


henrikg

Recommended Posts

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

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

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

<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

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

Använd getElementById(), typ:

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

osv.

 

Link to comment
Share on other sites

NoiseKiller

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

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

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
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.



×
×
  • Create New...