Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

Dölja flera rader!

henrikg

Startad av henrikg,
i Webbutveckling

Rekommendera Poster

henrikg

henrikg

Postad
Postad

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!

 

Länk till kommentar
Dela på andra webbplatser
Mikael Ericsson

Mikael Ericsson

Postad
Postad

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.

 

Länk till kommentar
Dela på andra webbplatser
henrikg

henrikg

Postad
  • Trådskapare
Postad

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!

 

Länk till kommentar
Dela på andra webbplatser
Mikael Ericsson

Mikael Ericsson

Postad
Postad 

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

 

Länk till kommentar
Dela på andra webbplatser
  • 10 months later...
NoiseKiller

NoiseKiller

Postad
Postad

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

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

 

 

Länk till kommentar
Dela på andra webbplatser
zerblat

zerblat

Postad
Postad

Använd getElementById(), typ:

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

osv.

 

Länk till kommentar
Dela på andra webbplatser
NoiseKiller

NoiseKiller

Postad
Postad

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.

 

Länk till kommentar
Dela på andra webbplatser
zerblat

zerblat

Postad
Postad

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]

 

Länk till kommentar
Dela på andra webbplatser
NoiseKiller

NoiseKiller

Postad
Postad

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.

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad
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]

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...