jEditable 输入框 CSS 样式答案

【问题标题】：jEditable input-box CSS stylejEditable 输入框 CSS 样式
【发布时间】：2010-09-14 14:25:18
【问题描述】：

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

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

alt text http://www.hongaijitsu.com/temp/foobar/public/Picture-2.png

这是我现在所在的位置：jEditable CSS Problem（双击表格单元格中的文本）

HTML sn-p:

<tr class="odd">
    <td class="dblclick" headers="customer-name">Drogo Shankara</td>
    <td class="dblclick" headers="mail">dshan@gmail.com</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，但它不起作用。

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

有什么想法吗？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

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

表{ 边框折叠：折叠； /宽度：940px； ...删除/ }

在使用固定表格宽度（或者某处可能存在“冲突”的 css）计算将输入字段设置为的宽度时，代码似乎会混淆。当我从表格中删除宽度时，该功能可以正常工作并且看起来还可以。

希望这有帮助，如果没有，请告诉我...

【讨论】：