如何在使用JQuery插入輸入字段時控制表格單元格寬度

我在webkit的目標網頁上有一個就地編輯功能。 HTML是微不足道的。如何在使用JQuery插入輸入字段時控制表格單元格寬度

我附上一個單擊處理程序，以每個單元使用jQuery：

$("table td").click(editMe); 

function editMe(e) { 
    var w = $(this).width(); // returns cell width 
    $(this).html("<span>Foo</span"); // does not change table width 
    $(this).html('<input type="text" />'); // CAUSES CELL width to BLOW UP! (gets VERY wide) 

    var in = $('<input type="text" />'); 
    in.width(w-10); 
    $(this).html(in); // CAUSES CELL WIDTH TO BLOW UP! (nearly doubles) 
}

設置寬度再多似乎任何區別。輸入沒有填充或邊距，沒有邊框。表格單元格寬度只是berzerk。重點是Webkit（Safari/Adobe AIR）。但爲什麼？

我怎樣纔能有輸入尺寸MATCH它所插入的表單元格？

來源

2011-04-21 user445658

首先，將點擊附加到每個td是一個壞主意。通過委託將處理程序附加到表中。其次，如果你把jsfiddle.net放在一起，我會更願意幫忙。 – 2011-04-21 16:33:15

好的，我沒有得到確切的答案，但事實證明，罪魁禍首是960Grid CSS框架的reset.css文件。我不知道究竟是哪個設置導致了奇怪的行爲，但是刪除該文件修復了它。

960Grid是一個簡單的CSS框架，我喜歡使用，但有關他們的reset.css文件導致我的表炸燬。只要我刪除該文件，表的行爲如預期。

來源

2011-04-22 17:22:03 user445658

如何在使用JQuery插入輸入字段時控制表格單元格寬度

回答

相關問題