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 に答える