CODEWITHSUNDEEP
jquerycsshtml-table
Shawn
Shawn

Reputation: 3149

Edit html table cell in place - input box size

I have a table that when cell in the "textEdit" class are double-clicked, they are editable. That works except when the cell content is replaced with an input box, it resizes the entire cell and that's ugly.

I've seen grids do this but they don't resize the cell. How?

The js: 

function loadEmpList(){ 
        var tbl="<table id='eList'>";
        tbl+="<tr>";
        tbl+="<th>ID</th>";
        tbl+="<th>user ID</th>";
        tbl+="<th>user PW</th>";
        tbl+="<th>account type</th>";
        tbl+="<th>name</th>";
        tbl+="<th>email</th>";
        tbl+="<th>action</th>";
        tbl+="</tr>";
        tbl+="</table>"

        $("#empList").html(tbl);

        var data=loadEmp(); // load from database

      var newRow;   
        for(var i=1;i<=data.length;i++){
                // record id, user, pw, type, email action
                newRow="<tr>";
                newRow+="<td>"+data[i-1][0]+"</td>";
                newRow+="<td class='textEdit'>"+data[i-1][1]+"</td>";
                newRow+="<td class='textEdit'>"+data[i-1][2]+"</td>";
                newRow+="<td>"+data[i-1][3]+"</td>";
                newRow+="<td class='textEdit'>"+data[i-1][4]+"</td>";
                newRow+="<td class='textEdit'>"+data[i-1][5]+"</td>";
                newRow+="<td><button>del</button></td>";
                newRow+="</tr>";

                $('#eList tr:last').after(newRow);
        }

        $('td.textEdit').dblclick(
                function(){
                    var text = $(this).text();
                    $(this).text('');
                    $('<input type="text" class="tableInput">').appendTo($(this)).val(text).select().blur(
                        function(){
                            var newText = $(this).val();
                            $(this).parent().text(newText),find('input:text').remove();
                        });
         });        

}

The CSS:

#eList{
    border-collapse:collapse;   
    min-width:800px;
    font-size:.9em;
}

#eList tr:hover td {
    background:#fffaf0; 
    color: #000;
}

#eList th{
    background:#ddd;
    border:1pt solid #ccc;
    padding:3px;
}

#eList td{
    background:#fff;
    border:1pt solid #ccc;
    padding:3px;
}

.tableInput{
    display: table-cell;
    vertical-align: top;
    width:100%;
}

Upvotes: 0

Views: 573

Answers (1)

Patrick Moore
Patrick Moore

Reputation: 13344

These changes may work:

#eList td{
    background:#fff;
    border:1pt solid #ccc;
    padding:3px;
    position: relative; 
    /* an absolutely positioned element must have a positioned parent */
}

.tableInput{
    display: table-cell;
    vertical-align: top;
    width: 500px;
    position: absolute; /* position absolutely */
    top: 0; /* align at 0,0 within the cell */
    left: 0;
    z-index: 999; /* place in front of the rest of the stack */
}

Upvotes: 1

Related Questions