टीडी

Question

का आकार कैसे प्राप्त करें मेरे पास एक टेबल है जिसमें मेरे पास टीडी है। जब मैं टेक्स्ट फ़ील्ड में क्लिक करता हूं जिसमें ऑनकीप्रेस ईवेंट डेटाबेस से मूल्यों का चयन करता है, तो तालिका से मुझे एक मूल्य दिखाया जाता है, जहां मैं मूल्य का चयन करता हूं। यह चयन तालिका है div में जो स्थिति है fixed.but यह भी चांग ऊंचाई

<td class="value">vehicle </td><td> 
<input type="text" id="txt_sh_vid" onKeyPress="vhc_record()" maxlength="4"> 
    <div id="div_vhc" class="search_form"> 
</div> 


<input type="text" id="vid" style="display:none;"> 

जावास्क्रिप्ट:

function vhc_record() { 
    var data = 'vhc=' + document.getElementById('txt_sh_vid').value; 
    loadXMLDoc('ship/vehicle_ship/', 'div_vhc', data); 
    document.getElementById('div_vhc').style.visibility = "visible"; 
} 

यह उपरोक्त तालिका के सीएसएस है

td.value 
    { 
    background-color:#00628B; 
    color:#E6E6DC; 
    height:50; 

    } 

    div.search_form 
    { 
    position:fixed; 
    background-color:white; 

} 

जब मैं पाठ फ़ील्ड में कुंजी दबाएँ यह भी वर्ग = "मूल्य" div id = "div_vhc" की तरह की ऊंचाई बदल जाएगा, जबकि इसकी ऊंचाई 50

Answer 1

यहां JSFiddle Demo है। अगर आप यही चाहते हैं तो मुझे बताएं:

मैं अनुमान लगा रहा हूं कि आप क्या देख रहे हैं td.value चौड़ाई और ऊंचाई को पकड़ना है। आप उपयोग कर सकते हैं offsetHeight या offsetWidth

मैं बहुत यकीन है कि आप एचटीएमएल की संरचना के आधार मानें कि ऐसा करने के लिए कोशिश कर रहे हैं, लेकिन पाने के लिए td.value की ऊंचाई आप निम्न कर सकते नहीं हूँ। बेशक यदि आप सभी टीडी तत्वों के माध्यम से पार करना चाहते हैं और तत्व w/वर्ग नाम मान ढूंढना चाहते हैं तो आपको कक्षा के भाग के रूप में तत्व के साथ तत्व के साथ मिलान करने के लिए रेगेक्स का उपयोग करना होगा:

आपका vhc_record फ़ंक्शन मध्य:

var myvalue = document.getElementsByTagName('td')[0]; //grabs the td.value element based on your html markup 

document.getElementById('div_vhc').style.height = myvalue.offsetHeight+'px'; //sets div_vhc height to that of td.value 
document.getElementById('div_vhc').style.width= myvalue.offsetWidth+'px';//sets div_vhc width to that of td.value 

परिवर्तन मैं HTML और सीएसएस के लिए किए गए और मैं उदाहरण स्पष्ट लग रहा है बनाने के लिए कुछ दृश्यता गुण कहा:

<table><tr><td class="value">vehicle </td></tr></table> 
<input type="text" id="txt_sh_vid" onKeyPress="vhc_record()" maxlength="4"> 
<div id="div_vhc" class="search_form"> 
</div> 


<input type="text" id="vid" style="display:none;"> 

td.value 
{ 
    background-color:#00628B; 
    color:#E6E6DC; 
    height: 50px; 
    width: 50px; 
} 

#div_vhc 
{ 
    position:fixed; 
    background-color:white; 
    display: none; 
    border: 1px solid black; 
} 

Answer 2

चरण 1 है: टेबल लेआउट जोड़ें : तालिका तत्व शैली के लिए तय।

चरण 2: टीडी तत्व शैली के लिए छिपा: अतिप्रवाह जोड़ें।

एक उदाहरण है जहाँ भीतरी DIV युक्त टीडी से अधिक लंबी है, लेकिन टीडी 50 में रहना और बाकी छुपा देगा:

<table style="table-layout:fixed"> 
    <tr> 
     <td style="overflow:hidden;height:50px;border:solid 1px #000"> 
      <div style="height:100px;background:#f00">Hello<br>I am a very<br>very<br>very<br>very<br>long<br>multiline<br>text...</div> 
     </td> 
    </tr> 
</table> 

अगर आप, अतिप्रवाह का उपयोग यह बजाय स्क्रॉल करना चाहते हैं: टीडी तत्व शैली में स्क्रॉल करें।