CODEWITHSUNDEEP
javascriptjqueryhtml-table
Andrew
Andrew

Reputation: 1324

jQuery .height() returning the wrong height for <td>

I have a problem with the jQuery .height() function returning an incorrect value for the height of a td element. This issue only occurs on one td element per row, in fact, it only occurs for the tallest td of any given row. It's a problem because I'm trying to make an editable table and when the user clicks on some of the cells, they collapse to a smaller height (the wrong height being returned by jQuery). I wonder if anyone knows why jQuery isn't returning the actual height here. Does anyone know of a way to make this work correctly? Preferably with jQuery?

The code and a demo are listed below.

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

Here's a link with a demo of the problem.

Upvotes: 0

Views: 359

Answers (1)

Saar
Saar

Reputation: 2306

jQuery returns the correct height, the problem in your code is this line:

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

you are calculating the height after you hide this element therefore the height changes.

do the height calculations before.

Upvotes: 1

Related Questions