Hur ändrar man en tr style=' visibility:none;'?

4 svar · 527 visningar · startad av rincewind 28 maj 2006

rincewindMedlem sedan nov. 2003104 inlägg

Frågan28 maj 2006 11:34#1

Tjena.. Jag har följande html kod:

    <tr>
      <td style='font-weight:bold;'>Emails</td>
      <td><input type='checkbox' name='emailtocustomer'></td>
      <td><a href='#' onMouseover='document.getElementById('hdf1').style.display='inline';'>INFOIMG</a></td>
      </tr>

      <tr id='hdf1' style='display:none;'>
      <td colspan=3>sds
      </td>
      </tr>

Dvs när jag drar muspekaren över INFOIMG så ändras <tr med ID hdf1 till display:inline; i stället för none..
Tänkte ha en onMouseout som ändrar tillbaka den till non visible..
Någon som vet hur man gör detta? När jag gör som jag har gjort nu säger Mozilla ifrån.. medans IE inte gör någonting=)

Mvh
--Rincewind

colioneMedlem sedan juni 20014 421 inlägg

29 maj 2006 12:53#2

<table><tr>
      <td style='font-weight:bold;'>Emails</td>
      <td><input type='checkbox' name='emailtocustomer'></td>
      <td><a href='#' onMouseover='document.getElementById("hdf1").style.display="inline"' onMouseOut='document.getElementById("hdf1").style.display="none"'>INFOIMG</a></td>
      </tr>

      <tr id='hdf1' style='display:none;'>
      <td colspan=3>sds
      </td>
      </tr>
	  </table>

rincewindMedlem sedan nov. 2003104 inlägg

1 juni 2006 09:33#3

hahah så enkelt det var=)

Okay, en annan sak då..

<body>
<table><tr>
      <td style='font-weight:bold;'>Emails</td>
      <td><input type='checkbox' name='emailtocustomer'></td>
      <td><a href='#' onMouseover='document.getElementById("hdf1").style.display="inline";' onMouseOut='document.getElementById("hdf1").style.display="none";'>INFOIMG</a></td>
      </tr>

      <tr id='hdf1' style='display:none;'>
      <td colspan=3>INFOTEXT
      </td>
      </tr>

		<tr><td colspan=3>Another row...</td></tr>
	  </table>
</body>

Så ser det tokbra ut i explorer. När man drar muspekaren över INFOIMG så veckas texten INFOTEXT ut på raden under. Drar man bort musen så vecklas raden ihop.

MEN i mozilla så ser det jätte bra ut när man väl dragit musen över. Men när man drar bort muspekaren tas texten bort, men utrymmet som texten tog upp tas ej bort. Och upprepar man detta så vecklas det ut igen och nytt utrymme tas upp..
Gör man detta många gånger tas sidan upp mycket plats..=)
Prova gärna själva!=)

Någon som vet hur man fixar detta?
Regardz,
-- R

nitro2k01Medlem sedan aug. 20039 340 inlägg

1 juni 2006 10:39#4

Enligt CSS-definitionen ska td- och tr-celler ha display: table-cell när de är synliga. Sätter du display: inline på en tabellcell i FF försöker FF göra det bästa av situationen genom att skapa en ny tabellcell och lägga elementet med display: inline i (Som alltså inte längre räknas som en tabellcell av FF)
Dock har IE en lite annorlunda tolkning av CSS, så att sätta display till table-cell ger bara ett fel. En lösning som funkar i båda läsarna är att lägga en div i tabellcellen, som du sedan ändrar display på. (Som för övrigt bör vara block och inte inline för en synlig div.)

<body>
<table><tr>
      <td style='font-weight:bold;'>Emails</td>
      <td><input type='checkbox' name='emailtocustomer'></td>
      <td><a href='#' onMouseover='document.getElementById("hdf1").style.display="block";' onMouseOut='document.getElementById("hdf1").style.display="none";'>INFOIMG</a></td>
      </tr>

      <tr >
      <td colspan="3" >
      <div id='hdf1' style='display:none;'>INFOTEXT</div>
      </td>
      </tr>

		<tr><td colspan=3>Another row...</td></tr>
	  </table>
</body>

rincewindMedlem sedan nov. 2003104 inlägg

1 juni 2006 12:45#5

tack.. bättre förklaring kunde jag inte ha önskat..