我正在尝试设置使用jEditable呈现的输入框的样式。

我想在双击文本并使其可编辑时更改表格单元格的颜色。像这样：

替代文字http://www.hongaijitsu.com/temp/foobar/public/Picture-2.png

这是我目前的位置：jEditable CSS问题(双击表格单元中的文本)

HTML片段：

<tr class="odd">
    <td class="dblclick" headers="customer-name">Drogo Shankara</td>
    <td class="dblclick" headers="mail">[email protected]</td>
    <td class="dblclick" headers="type">Web</td>
    <td class="dblclick" headers="status">Pending mail</td>
</tr>

jQuery代码：

$(function() {

$(".dblclick").editable("#", { 
    tooltip   : "Doubleclick to edit...",
    event     : "dblclick",
    css : 'inherit'
    });
});

对应的CSS：

.dblclick form {
    height: inherit !important;
    width: inherit !important;
    border: 0;  
    margin: 0;
    padding: 0;
    background: red;
    }

.dblclick input {
    height: inherit !important;
    width: inherit !important;
    border: 0;  
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    }

我希望输入框从父表单元格继承高度和宽度，但是当我在Firebug中查看输入框时，它已经设置了内联CSS高度和宽度，导致当按下td文本。我试图用inherit！important覆盖内联CSS，但是它不起作用。

这里有一些我还没有完全理解的概念，但这可能完全是平庸的。

任何想法有什么问题吗？

解决方案

每次双击时，jQuery / JavaScript都会操作DOM并动态添加/设置输入字段的宽度。由于内联样式(在DOM中动态生成)优先于所有其他样式，因此我们不能使用添加类中的新属性来更改动态呈现的内联样式。如果我们想摆脱奇怪的跳跃效果，请在screen.css文件中删除设置整个表格宽度的属性：

桌子 {
边界崩溃：崩溃；
/ width：940px; ...消除/
}

似乎在计算宽度以将输入字段设置为使用固定表宽度时(或者可能在某处存在"冲突"的CSS)时，代码感到困惑。当我从表格中删除宽度时，该功能正常工作并且看起来还不错。

希望这会有所帮助，让我知道是否可以...