Question

i have a table which in which i have td .when i click in text field which has onkeypress
event select values from database a table is shown from whic i select value.this select table is in div which position is fixed.but it will also chang the height

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

JavaScript:

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";
}

it is css of the above table

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

    }

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

}

when i press key in textfield it will also change the height of class=”value”
like div id=”div_vhc” while its height is 50

Answer 1

Here is the JSFiddle Demo. Let me know if this is what you are looking for:

I am guessing what you are looking for is to grab td.value width and height. You can use offsetHeight or offsetWidth

I am not very sure what you are trying to do, but to get the height of td.value you can do the following assume based on the structure of html. of course if you wish to traverse through all td element and find the element w/ the class name value then you’ll have to use regex to match the element with value as part of its class:

Your vhc_record function midified:

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

The changes i made to the html and css and i added some visiblity properties to make the example looks apparent:

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