cómo obtener el tamaño de td

Question

tengo una tabla en la que tengo td .cuando hago clic en el campo de texto que tiene onkeypress evento seleccione los valores de la base de datos se muestra una tabla de la que seleccione el valor.esta tabla de selección es en div cuya posición es fixed.but lo hará también chang la altura

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

es css de la tabla anterior

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

    } 

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

} 

cuando pulso clave en el campo de texto que también cambiará la altura de class = "valor" como div id = "div_vhc" mientras que su altura es de 50

Answer 1

Aquí está el JSFiddle Demo. Avísame si esto es lo que estás buscando:

Supongo que lo que estás buscando es tomar td.value ancho y alto. Puede utilizar offsetHeight o offsetWidth

No estoy muy seguro de lo que está tratando de hacer, pero para llegar a la altura de td.value puede hacer lo siguiente asumen basado en la estructura de html. Por supuesto, si desea recorrer todos los elementos de td y buscar el elemento con el valor de nombre de clase, deberá usar regex para hacer coincidir el elemento con el valor como parte de su clase:

Su función vhc_record midificó:

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 

los cambios que hice con el hTML y CSS y he añadido algunas propiedades del visiblity para hacer el ejemplo parece evidente:

<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

Paso 1: Añadir table-layout : se corrigió al TABLE element style.

Paso 2: Añadir overflow: hidden al estilo elemento TD.

Aquí se muestra un ejemplo en el que el DIV interior es más alto que el TD que contiene, pero el DT se quedará en el 50 y ocultar el resto:

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

si usted quiere tener que desplazarse a su lugar, utilice desbordamiento: desplazarse en el estilo del elemento td.