如何获取td的大小 [英] how to get the size of td

问题描述

我有一个表，其中我有td。当我点击文本字段有onkeypress
事件从数据库中选择值表显示从选择值。这个选择表是在div的位置是固定的，但它也将改变高度

 < td class =value> vehicle< / td> < td> 
< input type =textid =txt_sh_vidonKeyPress =vhc_record（）maxlength =4> 
< div id =div_vhcclass =search_form> 
< / div> 
 
 
< input type =textid =vidstyle =display：none;> 
  

JavaScript：

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

它是上表的css

  td.value 
 {
 background-color：＃00628B; 
 color：＃E6E6DC; 
 height：50; 
 
} 
 
 div.search_form 
 {
 position：fixed; 
 background-color：white; 
 
} 
  

当我在文本字段中按键时， div id =div_vhc，但 class =value
。

解决方案

这里是 JSFiddle演示。让我知道这是否是你要找的：

我猜你要找的是抓住 td.value width和height。您可以使用 offsetHeight 或 offsetWidth

非常确定你想要做什么，但是要获得 td.value 的高度，你可以根据html的结构做以下假设。当然如果你想遍历所有td元素并找到元素w /类名值，那么你必须使用regex来匹配元素和值作为其类的一部分：

您的vhc_record函数调用：

  var myvalue = document.getElementsByTagName（'td'）[0] //根据你的html标记获取td.value元素
 
 document.getElementById（'div_vhc'）。style.height = myvalue.offsetHeight +'px'; // set div_vhc height to that to td.value 
 document.getElementById（'div_vhc'）。style.width = myvalue.offsetWidth +'px'; //将div_vhc的宽度设置为td.value的宽度
  
 
 
 
我对html和css所做的更改和i添加了一些可见性属性，使示例看起来很明显：
 < table>< tr>< td class =value> vehicle< / td>< / tr> < / table> 
< input type =textid =txt_sh_vidonKeyPress =vhc_record（）maxlength =4> 
< div id =div_vhcclass =search_form> 
< / div> 
 
 
< input type =textid =vidstyle =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; 
} 
  
 
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 
解决方案
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;
}


                        
这篇关于如何获取td的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！