Jak sprawić, aby wygląd html był wyłączony?

Przeczytałem na niektórych forach, że wyłączenie wyglądu tablic HTML jest dodanie warstwy div. Mój problem polega na tym, że nie wiem, jak to zrobić.Jak sprawić, aby wygląd html był wyłączony?

mam 3 pytania:

1.) Jak ustawić wysokość div, który automatycznie dostosowuje się do wysokości stołu, gdy stół zwiększa swoją wysokość, kiedy nowy rząd dodaje.

2.) Jak mogę uczynić div przykryty stołem. Nie wiem jak warstwować elementy html.

3.) Jak mam zamiar kodować javascript, który sprawi, że mój wygląd będzie nieaktywny, gdy kliknę przycisk "Disable" i włącz go ponownie, gdy kliknę przycisk "Enable".

tabledisabletest.html

<html> 
<head> 
<script type="text/javascript"> 

</script> 
<style type="text/css"> 
table#tblTest { 
    width: 100%; 
    margin-top: 10px; 
    font-family: verdana,arial,sans-serif; 
    font-size:12px; 
    color:#333333; 
    border-width: 1px; 
    border-color: #666666; 
    border-collapse: collapse; 
} 

table#tblTest tr.highlight td { 
    background-color: #8888ff; 
} 

table#tblTest tr.normal { 
    background-color: #ffffff; 
} 

table#tblTest th { 
    white-space: nowrap; 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #dedede; 
} 

table#tblTest td { 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #ffffff; 
} 

#disabler { 
    width: 100%; 
    height: 200px; 
    background-color: #bbb; 
    opacity:0.6; 
} 
</style> 
</head> 

<body> 

<div id="disabler"></div> 

<table id="tblTest"> 
    <thead> 
    <tr> 
    <th>Name</th> 
    <th>Address</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>Tom</td>  
    <td>UK </td> 
    </tr> 
    <tr> 
    <td>Henrik</td> 
    <td>Denmark</td> 
    </tr> 
    <tr> 
    <td>Lionel</td> 
    <td>Italy</td> 
    </tr> 
    <tr> 
    <td>Ricardo</td>  
    <td>Brazil</td> 
    </tr> 
    <tr> 
    <td>Cristiano</td> 
    <td>Portugal</td> 
    </tr> 
    </tbody> 
</table> 
<input type="button" onclick="disable = true;" value="Disable" /> 
<input type="button" onclick="disable = false;" value="Enable" /> 
</body> 
</html>

Mam div disabler do zrobienia od wyłączenia, ale nie może to obejmować tabelę.

Proszę, pomóżcie mi z tym. Jestem taki nowy w tej rzeczy. Z góry dziękuję.

Źródło

2011-10-27 NinjaBoy

Sugestia: Zastosowanie jQuery BlockUI . Dema: http://jquery.malsup.com/block/#demos – Dev

Myślę, że najpierw muszę nauczyć się ojczystego javascriptu, zanim wskoczę do jakiejś zaawansowanej technologii. Muszę też nauczyć się javascript, ponieważ muszę przygotować się do egzaminu. – NinjaBoy

Co dokładnie masz na myśli, czyniąc go * wyglądającym na wyłączony *? Czy użytkownik może nadal wybierać z niego tekst? Czy musisz mieć te granice i efekty cienia, które widzisz na wyłączonej kontroli? –

Jeśli chcesz, aby element disabler nakładał się na tabelę, dodaj do niej ujemny margines dolny. Ustaw także wartość opacity na wartość niższą niż 1, aby całkowicie nie ukryć (ukryć) tabeli za nią.

#disabler { 
    opacity: 0.5; 
    margin-bottom: -200px; 
}

Odkąd wspomniałeś, że robisz to dla celów edukacyjnych, nie dam pełnego rozwiązania. Aby rozpocząć, zobacz this fiddle.

Jeśli chcesz, aby tekst wyglądają „Nie można wybrać”, należy użyć następującego CSS:

-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none;

Źródło

2011-10-27 14:00:33

Dzięki, ale jak to zrobić, aby automatycznie dostosować, gdy nowy wiersz zostanie wstawiony do tabeli. – NinjaBoy

@ChickenBoy Użyj JavaScript. "Wysokość" elementu może być zmieniona za pomocą 'element.style.height = height +" px ";' (gdzie 'height' to liczba)'. Aby uzyskać rozmiar elementu, użyj 'element.offsetHeight'. ** Zobacz http://jsfiddle.net/RAb8b/1/** dla dodatkowego kodu JavaScript. ** Jeszcze raz: nie pokazuję pełnego rozwiązania, * tylko * użyteczne wskazówki **, abyś się czegoś nauczył. Najlepszym sposobem nauki jest zdobywanie doświadczenia i popełnianie błędów. –

Dziękuję bardzo. Jesteś świetną pomocą !!! – NinjaBoy

trzeba będzie umieścić divdisabler w górnej części tabeli.

Możesz to zrobić, absolutnie ustawiając div. Dodałem nowy div, tableContainer obejmujący div disabler i tabelę, i absolutnie pozycjonując div.

<div id="tableContainer"> <!-- New Div--> 
    <div id="disabler"></div> 
    <table>....<table> 
</div>

Dodaj position: absolute; do #disabler

I najważniejsze napisać skrypt do wyświetlania i ukrywania div:

function disableTable() 
{ 
    document.getElementById("disabler").style.display = "block"; 
} 

function enableTable() 
{ 
    document.getElementById("disabler").style.display = "none"; 
}

żywo Przykład: http://jsbin.com/icuwug

Źródło

2011-10-27 14:01:22 Nivas

Jak sprawić, aby wygląd html był wyłączony?

Odpowiedz

Powiązane problemy