एचटीएमएल देखो कैसे अक्षम करें?

मैंने कुछ फ़ोरम में पढ़ा है कि एक HTML तालिका को अक्षम करने के लिए div की परत जोड़ना अक्षम है। मेरी समस्या यह है कि मुझे नहीं पता कि यह कैसे करना है।एचटीएमएल देखो कैसे अक्षम करें?

मैं 3 प्रश्न हैं:

1.) मैं div ऊंचाई है कि यह स्वचालित रूप से तालिका ऊंचाई को समायोजित करेगा जब भी मेज इसकी ऊंचाई बढ़ जाती है जब एक नई पंक्ति जोड़ दिया जाता है कैसे तय करेंगे।

2.) मैं div को तालिका को कैसे कवर करूंगा। मुझे नहीं पता कि एचटीएमएल तत्वों को कैसे लेना है।

3.) मैं जावास्क्रिप्ट को कोड करने के लिए कैसे जा रहा हूं, जब मैं 'अक्षम करें' बटन पर क्लिक करता हूं और जब मैं 'सक्षम' बटन पर क्लिक करता हूं तो इसे फिर से सक्षम करता हूं।

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>

मैं div disabler अक्षम करना क्या करना है लेकिन मैं इसे टेबल कवर नहीं कर सकता।

कृपया मुझे इसके साथ मदद करें। मैं इस बात के लिए इतना नया हूँ। अग्रिम में धन्यवाद।

स्रोत

2011-10-27 NinjaBoy

सुझाव: का प्रयोग करें jQuery BlockUI

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

को #disabler

और सबसे महत्वपूर्ण बातposition: absolute; जोड़े को प्रदर्शित करने और div को छिपाने के लिए जावास्क्रिप्ट लिखने । डेमो: http://jquery.malsup.com/block/#demos – Dev

मुझे लगता है कि मुझे कुछ उन्नत तकनीक में कूदने से पहले मूल जावास्क्रिप्ट सीखना होगा। इसके अलावा मुझे जावास्क्रिप्ट सीखना है क्योंकि मुझे परीक्षा के लिए तैयार करने की जरूरत है। – NinjaBoy

इसे * देखो अक्षम * बनाकर आपका क्या मतलब है? क्या उपयोगकर्ता अभी भी टेक्स्ट का चयन कर सकता है? क्या उन अक्षम सीमाओं पर आपको उन सीमाओं और छाया प्रभावों की आवश्यकता है? –

यदि आप अपनी तालिका को ओवरले करने के लिए disabler तत्व चाहते हैं, तो इसे नकारात्मक नीचे-मार्जिन जोड़ें। इसके अलावा, opacity को 1 से कम मान पर सेट करें, इसके पीछे तालिका को पूरी तरह से कवर (छुपाएं) न करें।

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

चूंकि आपने उल्लेख किया है कि आप इसे शिक्षित उद्देश्यों के लिए कर रहे हैं, मैं पूरा समाधान नहीं दूंगा। शुरू करने के लिए this fiddle देखें।

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

स्रोत

2011-10-27 14:00:33

धन्यवाद लेकिन तालिका में एक नई पंक्ति डालने पर मैं इसे स्वचालित रूप से समायोजित करने के लिए कैसे करूँगा। – NinjaBoy

@ChickenBoy जावास्क्रिप्ट का उपयोग करें। किसी तत्व की 'ऊंचाई' को 'element.style.height = height +" px "का उपयोग करके बदला जा सकता है; '(जहां' ऊंचाई' संख्या है)'। तत्व का आकार प्राप्त करने के लिए, 'element.offsetHeight' का उपयोग करें। ** अतिरिक्त जावास्क्रिप्ट कोड के लिए http://jsfiddle.net/RAb8b/1/** देखें। ** फिर से: मैं पूरा समाधान नहीं दिखा रहा हूं, * बस * उपयोगी संकेत **, ताकि आप कुछ सीख सकें। सीखने का सबसे अच्छा तरीका अनुभव प्राप्त करना और त्रुटियां करना है। –

बहुत बहुत धन्यवाद। आप इतनी बड़ी मदद कर रहे हैं !!! – NinjaBoy

आप तालिका के शीर्ष पर divdisabler जगह करना होगा:

आप एक पाठ देखने के लिए "unselectable" बनाना चाहते हैं, तो निम्न सीएसएस का उपयोग करें।

आप div को पूरी तरह से स्थितिबद्ध करके ऐसा कर सकते हैं। मैंने एक नया div, tableContainer को असहनीय div और तालिका में लिफाफा, और पूरी तरह से div को स्थितिबद्ध जोड़ा।

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

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

लाइव उदाहरण:: http://jsbin.com/icuwug

स्रोत

2011-10-27 14:01:22 Nivas

एचटीएमएल देखो कैसे अक्षम करें?

उत्तर

संबंधित मुद्दे