0

有以下代码：

HTML：

<table>
    <tr>
        <td class="first_column">Sign in</td>
        <td class="second_column">->(1)</td>
        <td class="third_column"><div class="translated">Some text</div></td>
    </tr>
</table>

JS：

$(".translated").mouseenter(function(){
    if ($(this).hasClass("editable")){
        return;
    }
    var h=$(this).height();
    var w=$(this).width();
    $(this).empty();
    var field = $("<input/>", {
            type: "text",
            value:$(this).text()
        }).appendTo(this);
    var button = $("<button></button>").appendTo(this);
    field.height(h - field.outerHeight()+field.height());
    button.height(h-button.outerHeight()+button.height());
    $(this).height(h);
    $(this).width(w);
    $(this).addClass("editable");
});

CSS：

.translated
{
    color:green;
    font-weight:bold;
    vertical-align:middle;
    width:100%;
}

当鼠标聚焦 div 时，此代码将输入和按钮项添加到 div 容器。但是存在以下问题 - 按钮的高度很好，但对齐不正确。我需要一个新的按钮项垂直位于行的中心。请告诉我，我该怎么做？

4

2 回答 2

1

您必须在 js 代码中设置按钮宽度：

button.css('width', field.width());

试试这个小提琴：http: //jsfiddle.net/velthune/NCrUu/5/

于 2012-11-30T09:06:21.027 回答
0

我清理了您的代码，添加了一个表格行并设置了输入和按钮的宽度。它们是不同的，因为浏览器提供了这些元素的边距和填充

http://jsfiddle.net/andreaslyngstad/BFwU7/

HTML

<table>
            <tr>
                <td class="first_column">Sign in</td>
                <td class="second_column">->(1)</td>
                <td class="third_column">
                  <div class="translated">Some text</div>
                </td>
            </tr>
<tr>
                <td class="first_column"></td>
                <td class="second_column"></td>
                <td class="third_column" id="button_container"></td>
            </tr>
 </table>​​​

CSS

table{
    width:100%
}
button{
    width:100px
}
input{
    width:96px
}
.translated {
    color:green;
    font-weight:bold;
    vertical-align:middle;
    width:100%;
  }​

JS

var field = $("<input/>", {
    type: "text",
    value: $(this).text()
})
var button = $("<button>sign in</button>")

$(".translated").mouseenter(function() {
    $(this).empty();
    field.appendTo(this);
    button.appendTo($("#button_container"));
});​
于 2012-11-30T09:24:14.517 回答