Question

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

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

这是上表的css

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

    }

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

}

当我在文本字段中按键时，它也会改变 class =“value”的高度喜欢 div id =“div_vhc”，而它的高度是50

Answer 1

这是JSFiddle Demo。如果您正在寻找，请告诉我：

我猜你正在寻找的是获取td.value宽度和高度。您可以使用offsetHeight或offsetWidth

我不太确定你要做什么，但要获得td.value的高度，你可以根据html的结构做以下假设。当然，如果你想遍历所有的td元素并找到带有类名值的元素，那么你将不得不使用正则表达式来匹配元素值作为其类的一部分：

您的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和css所做的更改和我添加了一些visiblity属性，以使示例看起来很明显：

<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步：将 table-layout：fixed 添加到 TABLE 元素样式。

第2步：将溢出：隐藏添加到 TD 元素样式。

这是一个内部DIV高于包含TD的示例，但TD将保持在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>

如果你想让它滚动，请使用overflow：滚动td元素样式。

如何获得td的大小

2 个答案: