Html devre dışı bakmak nasıl?

Bazı forumlarda html tablosunu devre dışı bırakmak için bir div katmanı eklemek olduğunu okudum. Benim sorunum nasıl yapılacağını bilmiyorum.

3 sorum var:

1.) Yeni bir satır eklendiğinde tablo yüksekliğini arttırdığında otomatik olarak ayarlayacağı div yüksekliğini tablo yüksekliğine nasıl ayarlarım?

2.) Divin masayı kapatmasını nasıl sağlayacağım. Html öğelerini katmanlamayı bilmiyorum.

3.) 'Devre Dışı Bırak' düğmesini tıkladığımda masamın devre dışı görünmesini sağlayacak javascript'i nasıl kodlayacağım ve 'Etkinleştir' düğmesini tıkladığımda tekrar etkinleştireceğim.

tabledisabletest.html

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

</script>

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

Devre dışı bırakma işlemini yapmak için div disabler sahibim ama tabloyu kapatamıyorum.

Lütfen bana bu konuda yardımcı olun. Bu şey için çok yeni. Şimdiden teşekkürler.

5
Engelli görünmesini sağlayarak tam olarak ne demek istiyorsunuz? Kullanıcı hala ondan metin seçebilir mi? Engelli kontrollerinde gördüğünüz sınırların ve gölge efektlerinin olması gerekiyor mu?
katma yazar Salman A, kaynak
Öneri: jQuery BlockUI kullanın. Demolar: jquery.malsup.com/block/#demos
katma yazar Dev, kaynak
İleri teknolojiye geçmeden önce doğal javascript'i öğrenmem gerektiğini düşünüyorum. Ayrıca JavaScript öğrenmem gerekiyor çünkü sınava hazırlanmam gerekiyor.
katma yazar NinjaBoy, kaynak
Metin seçimini devre dışı bırakmak mümkün mü? Engelli bir kontrole benzetmek istiyorum.
katma yazar NinjaBoy, kaynak

2 cevap

disabler öğesinin tablonuzun üst üste binmesini istiyorsanız, ona negatif bir alt kenar boşluğu ekleyin. Ayrıca, arkasındaki tabloyu tamamen gizlememek (gizlemek) için opacity değerini 1'den küçük bir değere ayarlayın.

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

Bunu eğitici amaçlar için yaptığınızdan bahsettiğinizden beri, tam çözümü vermeyeceğim. Başlamak için bu kemanın bölümüne bakın.

Bir metnin "seçilemez" görünmesini istiyorsanız, aşağıdaki CSS'yi kullanın:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
14
katma
@ChickenBoy JavaScript kullanın. Bir öğenin yüksekliği , element.style.height = height + "px"; kullanılarak değiştirilebilir (burada height bir sayıdır) < code>. Bir öğenin boyutunu almak için, element.offsetHeight` kullanın. Ek JavaScript kodu için bkz. jsfiddle.net/RAb8b/1 . Yine: Bir şeyi öğrenmeniz için tam çözümü göstermiyorum, sadece faydalı ipuçları . Öğrenmenin en iyi yolu, tecrübe edinmek ve hata yapmaktır.
katma yazar Rob W, kaynak
@ChickenBoy Bir şey değil. Sınavında iyi şanslar ;)
katma yazar Rob W, kaynak
Teşekkürler, ama tabloya yeni bir satır eklendiğinde otomatik olarak ayarlamayı nasıl yapacağım.
katma yazar NinjaBoy, kaynak
Çok teşekkürler. Sen harika bir yardımsın !!!
katma yazar NinjaBoy, kaynak

Masanın üstüne div disabler 'ı yerleştirmeniz gerekir.

Bunu kesinlikle div konumuna getirerek yapabilirsiniz. Disabler div'i ve masayı saran ve div'i kesinlikle konumlandıran tableContainer adlı yeni bir div ekledim.

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

Add position: absolute; to the #disabler

And most importantly write the JavaScript to display and hide the div:

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

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

Live Example: http://jsbin.com/icuwug

1
katma