Question

我遇到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，其中包含问题演示。

Answer 1

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

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

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

之前进行高度计算。

jQuery .height（）返回错误的高度

1 个答案: