jEditable input-box CSS style

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

Я хочу, чтобы входной ящик, чтобы наследовать ширину высота & от родительской таблицы-клетки, но когда я смотрю на входе коробки в Firebug она имеет высоту встроенный CSS & ширина уже установлен, в результате чего table-cell для масштабирования при нажатии на текст td. Я пытаюсь переопределить встроенный CSS с inherit !important, но он не работает.

Здесь есть какое-то понятие, которое я еще не полностью понял, но это может быть нечто абсолютно банальное.

Любые идеи, что не так?

Answer 1

jQuery/JavaScript манипулирует DOM и динамически добавляет/устанавливает ширину полей ввода каждый раз при двойном щелчке. Поскольку встроенные стили (динамически создаваемые в DOM) имеют приоритет над всеми другими стилями, вы не можете изменять динамически визуализированные встроенные стили с новыми атрибутами в прикрепленном классе. Если вы хотите избавиться от странного эффекта прыжка, удалите атрибут, задающий ширину всей таблицы в файле screen.css:

стол { border-collapse: collapse; /ширина: 940px; ... удалить/ }

кажется, что код запутывается при расчете ширины, чтобы установить поле ввода в при использовании фиксированной ширины таблицы (или, может быть, есть CSS где-то там, что «столкновение»). Когда я удаляю ширину из таблицы, функциональность работает и выглядит нормально.

Надеюсь, что это поможет, дайте мне знать, если это не так ...