Vis / Skjul tablerow

det er ikke kun én række ved hver option, men en eller flere?

Cross-browsing og oprydning af kode, regner jeg med at du selv lige kigger på?

<table>
    <tr>
        <td>
            Hvad er der galt med STB'en?
        </td>
        <td>
            <select name="problemet_er" id="problemet_er" onchange="if (this.value == 'Mekanisk lyd fra harddisk') { document.getElementById('hiddenRow').style.display = 'block'; }">
                <option value="">Vælg på listen</option>
                <option value="Mekanisk lyd fra harddisk" id="Mekanisk lyd fra harddisk">Mekanisk lyd fra harddisk</option>
                <option value="Stb genstarter umotiveret" id="Stb genstarter umotiveret">Stb genstarter umotiveret</option>
                <option value="Intet lys i stb" id="Intet lys i stb">Intet lys i stb</option>
                <option value="Orange lys på stb - 4 strejer i display" id="Orange lys på stb - 4 strejer i display">Orange lys på stb - 4 strejer i display</option>
                <option value="HDMI lyd problem rev B stb" id="HDMI lyd problem rev B stb">HDMI lyd problem rev B stb</option>
                <option value="andet" id="andet">Andre årsager - Beskrives!</option>
            </select>
        </td>
    </tr>
    <tr style="display: none;" id="hiddenRow">
    <td>Den skjulte række</td>
    </tr>
<table>

det er måske lidt omstændigt/uoverskueligt at lave det på den måde. jeg ville lave det som en funktion:

function showRows(value){
  switch(value){
      case 'Mekanisk lyd fra harddisk':
        document.getElementById('row1').style.display='block';
        ...
      break;
      case 'Mekanisk lyd fra harddisk':
        document.getElementById('row4').style.display='block';
        ...
      break;
  }
}

<select onchange="showRows(this.value)">

Ja, selvfølgelig - og det var så det jeg mente med, at han sikkert selv kunne gøre det pænere.

I stedet for en switch kunne han også navngive rækkerne med value fra de enkelte options, give alle hidden blokke samme class og så nøjes med:

<option value="block1"> ... </option>
<tr class="hiddenblocks" id="block1"> ... </tr>

.hiddenblocks {
    display: none;
}

var hiddenBlocks = document.getElementsByClass('hiddenblocks');
for (i = 0; i < hiddenBlocks.length; i++)
    hiddenBlocks[i].style.display = 'none';
document.getElementById(this.value).style.display = 'block';


Det kræver selvfølgelig at der ikke er noget overlap, sådan at to options skal vise samme række og at der ikke er flere rækker der skal åbnes samtidig. Men ligesom oprydningen kan der let findes en anden lignende løsning og jeg tror eksemplet demonstrere idéen ..

<ole>

Det kræver også, browseren ikke tager CSS seriøst - for så giver 'display:block' ikke mening:
    http://www.w3.org/TR/CSS2/tables.html#q2
    http://www.w3.org/TR/CSS2/visuren.html#display-prop

- men ikke alle browsere, som findes 'derude', forstår 'display:table-row'  :o|

/mvh
</bole>

Tjaah, det er mere "korrekt" at sætte display til table-row - men så får du nok desværre et problem med en stor del af de besøgende. Som du selv kommenterer, virker det ikke lige godt i alle browsere. For eksempel vil IE (som sædvanlig) ikke være med :(

Det er en diskussion hvor der er mange meninger - men min klare holdning i den situation, vil være at man bør udnytte de andre browseres velvilje til at understøtte den "forkerte" kode, sådan at også IE brugerne kan være med. Især når det endelige resultat ikke er meget anderledes for de øvrige browsere. Havde det gået "ud over" det samlede resultat, havde jeg nok overvejet at finde en anden løsning.

Under alle omstændigheder må de andre browsere vel fange den "gale" kode og korrekt få oversat det til table-row, siden de stadig er i stand til at vise resultatet.

det kunne også ændres, så du bruger divs, i stedet for tables...

nicklasb >> Vi har faktisk på E set eksempler på situationer, hvor renderingen gik i ged med 'display:block' på tr-elementer. Det sker også af og til ved li-elementer, der søges vist/skjult med display-værdierne 'block' og 'none'.

Derudover skal du nok passe på med reflekskommentarer omkring IE. Den slags er 'åh, så almindelige' - men bygger ofte på manglende kendskab til standardenes faktiske substans. Således skriver W3C bag det første link, jeg lagde:

"The default style sheet for HTML 4.0 in the appendix illustrates the use of these values for HTML 4.0:

TABLE    { display: table }
TR      { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH  { display: table-cell }
CAPTION  { display: table-caption }

User agents may ignore these 'display' property values for HTML documents, since authors should not alter an element's expected behavior."

Der er altså for såvidt ikke noget galt i IE's opførsel  ;o)

Ja, okey - så må vi hellere fortælle benhur at det ikke kan lade sig gøre. Så må han jo selv se om "løsningen" (som før øvrigt benyttes på rigtig mange sider) alligevel kan bruges ..

Jeg er udemærket klar over at der findes standarder - og er sådan se også fortaler for at følge dem. Men det er svært at fortælle kunden at det ikke kan lade sig gøre, fordi en standard siger det, når han kan se konkurrenten kan. (Og ja, man kan altid komme med bud på en hel anden løsning, der eksempelvis slet ikke bruger table-rows, da det jo så ikke virker ens og som han gerne vil have det i alle browsere - som jeg forøvrigt også gør ind imellem her på siden. Men i dette tilfælde bliver det så ikke mig; jeg har forsøgt at svare på hans spørgsmål og synes trods standarder at jeg kan stå inde for det jeg har svaret.)

Rolig nu  =)

Det handler ikke her om at overholde standarder, men om browsernes tolkning af dem. Jeg nævner blot, at vi har set situationer, hvor der gik ged i renderingen p.gr.a. brugen af 'block' ved tr- og li-elementer. I'm just the messingerboy  =)

Jeg er helt rolig :) Og jeg respektere dine kommentarer. Jeg er blot ikke enig i din balance mellem teori og praksis. Nu ved jeg ikke hvad du laver til dagligt - men jeg tror ikke det kommer som en overraskelse, at flere softwarehuse udvikler løsninger med langt større problemer, end jeg tror denne skaber. Jeg ved fra hvad jeg kan læse her på siden, at du er ganske god inden for en masse områder.

Hvis jeg bliver spurgt og får postet kode af den kvalitet trådstarter har postet, har jeg ingen skrubler ved at poste et svar af samme kvalitet.

Jeg mener selv at jeg normalt laver ganske solide løsninger, af ganske god kvalitet. Men jeg indrømmer gerne at jeg sjældent programmerer Javascript og er udemærket klar over at du helt sikkert ved meget mere om det end jeg. Og det er rigtig fint at du kommenterer at det kan skabe problemer - jeg kommenterer bare at jeg ikke synes det bør standse ham før det giver problemer.

Men, vi er vist ved at være kommet et stykke væk fra emnet. Så lad os slutte den her - du kan eventuelt tilføje mig på MSN, hvis du vil diskutere det videre :) .. eller blot vil sige hej.

"Jeg mener selv  ..." >> Det mener jeg absolut også  ;o)

Jeg er ikke på MSN  =)

Mange tak for svarene!

Jeg har desværre været forhindret i at kigge på tingene før nu... :(

Jeg er mest interesseret i metoden, hvor en funktion benyttes, men jeg har ikke kunne få den til at fungere. Her er hvad jeg har skrevet uden resultat.

Funktion:

function showRows(value){
  switch(value){
      case 'Mekanisk lyd fra harddisk':
        document.getElementById('row1').style.display='block';
        ...
      break;
      case 'Stb genstarter umotiveret':
        document.getElementById('row1').style.display='block';
        ...
      break;
  }
}

DropDown:

        <select onchange="showRows(this.value)" name="problemet_er" id="problemet_er">
            <option value="">Vælg på listen</option>
            <option value="Mekanisk lyd fra harddisk">Mekanisk lyd fra harddisk</option>
            <option value="Stb genstarter umotiveret">Stb genstarter umotiveret</option>
            <option value="Intet lys i stb">Intet lys i stb</option>
            <option value="Orange lys på stb - 4 strejer i display">Orange lys på stb - 4 strejer i display</option>
            <option value="HDMI lyd problem rev B stb">HDMI lyd problem rev B stb</option>
            <option value="andet">Andre årsager - Beskrives!</option>
        </select>

Tablerow, der skal vises:

<tr  style="display: none;" id="row1">
    <td>
        <a href="#" target="_blank">Gui-id</a> på kundens STB
    </td>
    <td>
        <input type="text" name="gui_id" id="gui_id">
    </td>
</tr>

Det skal bruges på et intranet, hvor den eneste browser, der benyttes er IE, så crossbrowser osv. er ikke så nødvendigt, men hvis der er et eller andet åbenlyst må i meget gerne påpege det.

Jeg har selv løst problemet på følgende måde...

Jeg har lavet en funktion, der ser således ud:

function showTR() {
if (document.fejlformular_stb.problemet_er.selectedIndex == 0) {
document.getElementById("row1").style.visibility = "hidden";
}
if (document.fejlformular_stb.problemet_er.selectedIndex == 1) {
document.getElementById("row1").style.visibility = "visible";
}

Min tablerow har så et id, der hedder "row1" og funktionen kalder jeg med onchange = "showTR();" i mit select tag.