Html görünümü nasıl devre dışı bırakılır? Ben bir html tablo engelli görünmesi için bazı forumlarda okumak

div katmanı eklemektir. Benim sorunum, nasıl yapacağımı bilmiyorum. Html görünümü nasıl devre dışı bırakılır? Ben bir html tablo engelli görünmesi için bazı forumlarda okumak

Ben 3 soru var: Ben yeni bir satır eklendiğinde tablo yüksekliğini artırır takıldığında otomatik tablo yüksekliğine ayarlayacaktır div yüksekliğini belirler nasıl

1.).

2.) nasıl div kapak masa yapacaktır. Html elemanlarını nasıl katmanlandıracağımı bilmiyorum. Nasıl tıklayın düğmesini 'Enable' zaman 'devre dışı bırak' düğmesini tıklayın ve yeniden etkinleştirmek benim masa engelli görünmesini sağlayacaktır javascript kodu için gidiyorum

3.).

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

tabledisabletest.html

ben devre dışı bırakılmasına yapmak div disabler var ama tablo kapak yapamazsınız.

bana bu konuda yardımcı olun. Bu şeye çok yeniyim. Şimdiden teşekkürler.

kaynak

2011-10-27 NinjaBoy

Öneri: Kullanım jQuery BlockUI

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

#disabler

Ve en önemlisi için position: absolute; ekle görüntülemek ve div gizlemek için javascript yazma . Demos: http://jquery.malsup.com/block/#demos – Dev

Ben ilk olarak bazı ileri teknoloji atlayarak önce yerli javascript öğrenmek gerek. Ayrıca javascript öğrenmem gerekiyor çünkü bir sınava hazırlanmam gerekiyor. – NinjaBoy

Tam olarak ne yaparak kastettiniz * bak devre dışı *? Kullanıcı hala metni seçebilir mi? Engelli kontrollerde gördüğünüz sınırların ve gölge efektlerinin olması gerekir mi? –

disabler öğesinin tablonun üzerine yerleşmesini istiyorsanız, buna negatif bir alt kenar boşluğu ekleyin. Ayrıca, arkasındaki tabloyu tamamen gizlemek (gizlemek) için opacity değerini 1'den küçük bir değere ayarlayın.

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

Bunu eğitim amaçlı yaptığınızı belirttiğinizden beri, tam çözümü vermeyeceğim. this fiddle Başlamak için bkz. Tablonun üstünde disablerdiv yerleştirmek zorunda kalacak

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

kaynak

2011-10-27 14:00:33

Teşekkürler ama masaya yeni bir satır eklendiğinde otomatik olarak nasıl ayarlayacağım. – NinjaBoy

@ChickenBoy JavaScript'i kullanın. Bir elemanın "yüksekliği", "element.style.height = height +" px ";' ('height 'bir sayıdır)' kullanılarak değiştirilebilir. Bir elemanın boyutunu almak için 'element.offsetHeight' kullanın. ** Daha fazla JavaScript kodu için http://jsfiddle.net/RAb8b/1/** adresini ziyaret edin. ** Yine: Ben tam bir çözüm göstermiyorum, * sadece * yararlı ipuçları **, böylece bir şeyler öğrenirsiniz. Öğrenmenin en iyi yolu, deneyim kazanmak ve hatalar yapmaktır. –

Çok teşekkürler. Çok iyi bir insansın! – NinjaBoy

: Bir metin "unselectable" görünmesi istiyorsanız

aşağıdaki CSS kullanabilirsiniz.

Kesinlikle div konumlandırarak bunu yapabilirsiniz. Disabler div ve tabloyu kaplayan ve div'u kesinlikle konumlandıran yeni bir div, tableContainer ekledim.

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

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

Canlı Örnek: http://jsbin.com/icuwug

kaynak

2011-10-27 14:01:22 Nivas

Html görünümü nasıl devre dışı bırakılır? Ben bir html tablo engelli görünmesi için bazı forumlarda okumak

cevap

İlgili konular