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

Question

I need little help. Here is the situation that I have. I have two columns in HTML form table design (table, tr and td elemnts). First column is populated dynamically according to doctors (29 doctors, 30 doctors, and etc, how the query returns, so dynamic) it depends {input type=”text”}, in the second column there is a textbox field which I want to be stretched by height according to number of doctors in the first column. I did some coding and made it work in FF, Chrome but it needs to also work in IE8, so I am confused and searching for better approach .

Here is the code, please help me out so It looks nice and works.

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

Here is also the image of the problem...

Answer 1

It could work with something like this:

Get the real top position of your last input with jquery:

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

?

Answer 2

I played it more around it and took some pieces from Superdrac and https://stackoverflow.com/a/8342709/779965

Here is my code that is test and it works:

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

1. Basically offset gives us top from the top of the screen;
2. Then we take offset top from first element and last element
3. Subtract those two offsets we get.
4. Add result value as height for textarea

Here are also the images:

Firebug debug End result