Cách tắt giao diện html?

Tôi đọc trong một số diễn đàn để làm cho một bảng html nhìn vô hiệu hóa là thêm một lớp div. Vấn đề của tôi là tôi không biết làm thế nào để làm điều đó.Cách tắt giao diện html?

Tôi có 3 câu hỏi sau:

1.) Làm thế nào tôi sẽ thiết lập chiều cao div rằng nó sẽ tự động điều chỉnh để chiều cao bàn bất cứ khi nào bàn làm tăng chiều cao của mình khi một hàng mới được thêm vào.

2.) Làm cách nào để làm cho div bao gồm bảng. Tôi không biết cách lớp các phần tử html.

3.) Làm cách nào để mã javascript sẽ làm cho bảng của tôi trông bị tắt khi tôi nhấp vào nút 'Tắt' và bật lại khi tôi nhấp vào nút 'Bật'.

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>

Tôi có div disabler để làm vô hiệu nhưng tôi không thể làm cho nó bao gồm bàn.

Hãy giúp tôi với điều này. Im quá mới với điều này. Cảm ơn trước.

Nguồn

2011-10-27 NinjaBoy

Góp ý: Sử dụng jQuery BlockUI . Trình diễn: http://jquery.malsup.com/block/#demos – Dev

Tôi nghĩ rằng tôi cần phải tìm hiểu javascript gốc trước khi nhảy vào một số công nghệ tiên tiến. Ngoài ra tôi cần phải học javascript vì tôi cần chuẩn bị cho kỳ thi. – NinjaBoy

Chính xác thì ý bạn là gì khi làm cho nó * trông bị vô hiệu hóa *? Người dùng vẫn có thể chọn văn bản từ nó? Liệu nó cần phải có những biên giới và hiệu ứng bóng bạn nhìn thấy trên điều khiển vô hiệu hóa? –

Nếu bạn muốn phần tử disabler che phủ bảng của bạn, hãy thêm lề dưới phủ định vào nó. Ngoài ra, đặt opacity thành giá trị nhỏ hơn 1, để không che hoàn toàn (ẩn) bảng phía sau nó.

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

Vì bạn đã đề cập rằng bạn đang làm điều này cho mục đích giáo dục, tôi sẽ không đưa ra giải pháp đầy đủ. Xem this fiddle để bắt đầu.

Nếu bạn muốn thực hiện một văn bản trông "unselectable", sử dụng CSS sau:

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

Nguồn

2011-10-27 14:00:33

Cảm ơn nhưng làm thế nào tôi sẽ làm cho nó tự động điều chỉnh khi một hàng mới được chèn vào trong bảng. – NinjaBoy

@ChickenBoy Sử dụng JavaScript. Bạn có thể thay đổi 'height' của một phần tử bằng cách sử dụng' element.style.height = height + "px"; '(trong đó' height' là một số) '. Để có được kích thước của một phần tử, sử dụng 'element.offsetHeight'. ** Xem http://jsfiddle.net/RAb8b/1/** để biết thêm mã JavaScript. ** Một lần nữa: Tôi không hiển thị giải pháp đầy đủ, * chỉ * gợi ý hữu ích **, để bạn tìm hiểu điều gì đó. Cách tốt nhất để tìm hiểu là nhận được trải nghiệm và thực hiện các lỗi. –

Cảm ơn rất nhiều. Bạn là một trợ giúp tuyệt vời !!! – NinjaBoy

Bạn sẽ phải đặt divdisabler trên đầu bảng.

Bạn có thể làm như vậy bằng cách định vị hoàn toàn div. Tôi đã thêm một div mới, tableContainer bao bọc div phân tán và bảng, và hoàn toàn định vị div.

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

Thêm position: absolute; đến #disabler

Và quan trọng nhất viết javascript để hiển thị và ẩn các div:

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

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

sống Ví dụ: http://jsbin.com/icuwug

Nguồn

2011-10-27 14:01:22 Nivas

Trả lời

Các vấn đề liên quan