Question

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

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

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

这就是我现在所处的位置：jEditable CSS Problem（双击表格中的文字）

HTML片段：

<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;
    }

我希望输入框继承高度＆amp;来自父表格单元格的宽度，但是当我查看Firebug中的输入框时，它具有内联CSS高度＆amp;宽度已设置，导致在按下td文本时表格单元格缩放。我尝试使用inherit !important覆盖内联CSS，但它不起作用。

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

任何想法有什么不对？

Answer 1

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

表{ 边界崩溃：崩溃; / 宽度：940px; ...删除 / }

当计算宽度以将输入字段设置为使用固定表宽度时（或者可能存在某些“碰撞”的css）时，代码似乎变得混乱。当我从表中删除宽度时，功能正常并且看起来没问题。

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

jEditable输入框CSS样式

1 个答案: