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

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

下面列出了代码和demo。

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

这是带有问题演示的link。

最佳答案

jQuery返回正确的高度，您的代码中的问题是此行：

$("#"+rowid+"-p-"+id).hide();

隐藏此元素后，您正在计算高度，因此高度会发生变化。

之前进行高度计算。