jQuery .height() 返回错误的高度<td>

jQuery .height()函数返回td元素高度的错误值时，我遇到了问题。这个问题只发生在每行一个td元素上，事实上，它只发生在任何给定行中最高的td上。这是一个问题，因为我正在尝试制作一个可编辑的表，当用户单击某些单元格时，它们会塌陷到较小的高度（jQuery返回了错误的高度）。我想知道是否有人知道为什么jQuery没有在这里返回实际高度。有人知道一种正确的方法吗？最好使用jQuery？

下面列出了代码和演示。

HTML

<table id="thetable">
    <tr>
        <th class="noselect" id="th-10" title="double click to edit"><p id="p-10" style="padding:10px;">Field 1</p><textarea id="thinput-10" class="th-edit"  autocomplete="off">Field 1</textarea></th>
        <th class="noselect" id="th-11" title="double click to edit"><p id="p-11" style="padding:10px;">Field 2</p><textarea id="thinput-11" class="th-edit"  autocomplete="off">Field 2</textarea></th>
        <th class="noselect" id="th-12" title="double click to edit"><p id="p-12" style="padding:10px;">Field 3</p><textarea id="thinput-12" class="th-edit"  autocomplete="off">Field 3</textarea></th>
    </tr>
    <tr>
        <td id="3571-td-10" class="noselect" style=""><p id="3571-p-10" style="padding:10px;">bla bla bla bla bla</p><textarea id="3571-tdinput-10" class="td-edit" style="text-align:left;" autocomplete="off">bla bla bla bla bla</textarea></td>
        <td id="3571-td-11" class="noselect" style=""><p id="3571-p-11" style="padding:10px;"></p><textarea id="3571-tdinput-11" class="td-edit" style="text-align:left;" autocomplete="off"></textarea></td>
        <td id="3571-td-12" class="noselect" style=""><p id="3571-p-12" style="padding:10px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p><textarea id="3571-tdinput-12" class="td-edit" style="text-align:left;" autocomplete="off">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</textarea></td>
    </tr>
    <tr>
        <td id="3572-td-10" class="noselect" style=""><p id="3572-p-10" style="padding:10px;">bla bla bla bla bla</p><textarea id="3572-tdinput-10" class="td-edit" style="text-align:left;" autocomplete="off">bla bla bla bla bla</textarea></td><!--11!=0-->
        <td id="3572-td-11" class="noselect" style=""><p id="3572-p-11" style="padding:10px;">bla bla bla bla bla</p><textarea id="3572-tdinput-11" class="td-edit" style="text-align:left;" autocomplete="off">bla bla bla bla bla</textarea></td>
        <td id="3572-td-12" class="noselect" style=""><p id="3572-p-12" style="padding:10px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p><textarea id="3572-tdinput-12" class="td-edit" style="text-align:left;" autocomplete="off">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </textarea>
        </td>
    </tr>
</table>

CSS

.td-edit,.th-edit{
display:none;
width:100%;
height:100%;
margin:0px;
border-style:none;
border-radius:0px;
padding:10px;
resize:none;
background-color:#CCCCCC;
text-shadow:0px 1px 1px white;
text-align:center;
}
tr{
    padding:0px;
    margin:0px;
}
td,th{
position:relative;
padding:0px;
min-width:100px;
border-style:solid;
border-color:#000000;
border-width:1px;
}
textarea{
    margin:0px;
    padding:0px;
    border-style:none;
    display:inline-block;
}
table{
    cursor:text;
    width:400px;
}

JS/jQuery

$(document).ready(function(){
    $("td").on("click",function(){
        var res = $(event.target).attr('id').split("-");
        var id = Number(res[res.length-1]);
        var rowid = Number(res[0]);
        $("#"+rowid+"-p-"+id).hide();
        //alert("width = "+($("#"+rowid+"-td-"+id).width()+1)+"px; height = "+($("#"+rowid+"-td-"+id).height()+1)+"px;");
        $("#"+rowid+"-tdinput-"+id).css("width",($("#"+rowid+"-td-"+id).width()+1)+"px");
        $("#"+rowid+"-tdinput-"+id).css("height",($("#"+rowid+"-td-"+id).height()+1)+"px");
        $("#"+rowid+"-th-"+id).css("padding","0px");
        $("#"+rowid+"-tdinput-"+id).show();
        $("#"+rowid+"-tdinput-"+id).focus();
    });
    $("td").on("mouseleave",function(){
        var res = $(event.target).attr('id').split("-");
        var id = Number(res[res.length-1]);
        var rowid = Number(res[0]);
        //$("#img-"+id).finish();
        //$("#img-"+id).hide();
        $("#"+rowid+"-tdinput-"+id).finish();
        $("#"+rowid+"-tdinput-"+id).hide();
        var name = $("#"+rowid+"-tdinput-"+id).val();
        $("#"+rowid+"-p-"+id).html(name);
        $("#"+rowid+"-p-"+id).finish();
        $("#"+rowid+"-p-"+id).fadeIn(200);
    });
});

这里有一个问题的演示链接。