在 HTML 表格设计中，根据输入框按高度动态增长/缩小文本框答案

【问题标题】：Dynamic grow/shrink textbox by height according to inputboxes, in HTML table design在 HTML 表格设计中，根据输入框按高度动态增长/缩小文本框
【发布时间】：2014-06-19 05:41:30
【问题描述】：

我需要一点帮助。这是我的情况。我在 HTML 表格设计中有两列（table、tr 和 td 元素）。第一列是根据医生动态填充的（29 位医生、30 位医生等，查询返回的方式，如此动态）它取决于 {input type=”text”}，在第二列中有一个我想要的文本框字段根据第一列中的医生人数按高度拉伸。我做了一些编码，让它在 FF、Chrome 中工作，但它也需要在 IE8 中工作，所以我很困惑，正在寻找更好的方法。

这是代码，请帮帮我，这样它看起来不错并且有效。

<?php

   echo "<h3 style='color:maroon'>... Please fill in the data for XRAY EXPECTED READS & XRAY UNIT READS...</h3>";
            echo "<br/><br/>";
            echo "<table border='1'>";
            echo 
            "<tr>
                <td style='width:168px'><b>Radiologist</b></td>
                <td><b>XRAY EXPECTED READS</b></td>         
            </tr>";
            //echo "<tr></tr>";

            foreach ($rad_ln as $k => $rl)
            {
                 echo "<tr>";

                    /*Rads*/
                    echo "<td>";
                    echo "<select name='rs_$k' id='rs_$k' style='width:168px'>";
                    echo sprintf('<option value="%s">%s</option>',$rl->rad_id,$rl->rad_last_name);
                    echo "</select>";
                    echo "</td>";

                    if($i == 0)
                    {                   
                        //Expected unit reads
                        echo "<td id='xray_expected_td' rowspan='" . count((array)$rad_ln) . "'>";;
                        echo '<textarea class="pf_update_xray_unit_reads_data" name="xray_expected_reads_data" id="xray_expected_reads_data"></textarea>';
                        echo "</td>";       

                    }

                echo "</tr>";

                $i++;
            }

            echo "</table>";

            echo "<br/><br/>";
?>

这里也是问题的图……

【问题讨论】：

在 javascript 中，您需要获取最后一个输入的实际顶部位置，将输入的高度添加到顶部值，并在 javascript 中使用此值调整文本框的大小。 jquery中的offset()函数可以为你提供页面中item的真实top值。

标签： php html css forms layout

【解决方案1】：

它可以与这样的东西一起使用：

使用 jquery 获取上一次输入的真正顶部位置：

var posTop=$('#yourinputid').offset().top;
var heightInpt=$('#yourinputid').height();
var heightInput=posTop+heightInpt;
$('#textareaid').height(heightInput);

【讨论】：

【解决方案2】：

我围绕它演奏了更多，并从 Superdrac 和 https://stackoverflow.com/a/8342709/779965 中提取了一些片段

这是我的测试代码：

var height_last_element_rads    = $('select[name^="rs"]:last').offset().top;

var height_first_element_rads   = $('select[name^="rs"]:first').offset().top;

var height_text_area = height_last_element_rads - height_first_element_rads;

$('#xray_expected_reads_data').height( height_text_area );

基本上偏移让我们从屏幕顶部开始；
然后我们从第一个元素和最后一个元素中获取偏移量
减去我们得到的这两个偏移量。
将结果值添加为文本区域的高度

还有图片：

Firebug 调试 最终结果

【讨论】：