Ответ AJAX с тегами TD, заменяющими строку таблицы, помещен в Chrome

Question

Я пытаюсь использовать editInPlace код JavaScript с Python и Django в Google App Engine. После редактирования строки таблицы:

<table>
  <tr id="editme" class="editme">
    <td>Date</td>
    <td>Description</td>
    <td>Details</td>
  </tr>
  <tr id="editme" class="editme">
    <td>Date</td>
    <td>Description</td>
    <td>Details</td>
  </tr>
  <tr id="editme" class="editme">
    <td>Date</td>
    <td>Description</td>
    <td>Details</td>
  </tr>
</table>

Что выглядит так:

 ___ ___ ___
|___|___|___|
|___|___|___|
|___|___|___|

Мне кажется, что JavaScript editInPlace сохранит исходную строку, например "<td>Date</td><td>Description</td><td>Details</td>", заменив ее полосатой строкой без <td> (например, "Детали описания даты"), поместив строку в <td colspan="3"><form>...</form></td> для редактора для редактирования. .

Итак, я подготовил, что Http-ответ после отправки нового значения также будет имитировать 3 столбца, я имею в виду, что теги <td></td> (например, "<td>ResponseDate</td><td>ResponseDescription</td><td>ResponseDetails</td>") будут помещены между тегами <tr></tr>.

Но проблема в том, что после замены значений AJAX без обновления страницы дыр, я получаю неприятную таблицу. Вся строка в Chrome v12 как бы сдвинута в сторону и начинает заполнение со второго столбца:

 ___ ___ ___
|___|___|___|___
 ___|___|___|___|
|___|___|___|

Answer 1

Пожалуйста, используйте Chrome Developer Tools, чтобы проверить поврежденную строку после того, как она была отредактирована (и отображена неправильно) - щелкните правой кнопкой мыши по любой ячейке и выберите «Проверить элемент» во всплывающем меню.Откроется окно DevTools, и вы сможете проверить (на панели «Элементы»), является ли окончательный DOM правильным.Если это так, то это ошибка Chrome / WebKit.

Answer 2

Краткое описание моей проблемы

После некоторой отладки моей проблемы я обнаружил, что моя проблема была вызвана следующей ситуацией.

Класс со стилем content: "", являющийсяприменяется к целевому TR до вызова Ajax, который заменит TD новым набором TD, затем, после удаления этого класса, у меня возникла та же проблема, что и у OP;Конечным результатом стало смещение ТД вправо.HTML на осмотре был звуковым.

Подробно это то, что у меня было.

• У меня был TR, который был моим контейнером targetId.
• У меня был TD сajax-ссылка, которая затем возвращает набор TD для замены старого набора в targetId TR.
• Я использую jquery ajax, и перед вызовом я применил класс к targetId TR, классу , который можно найти в этом ответе и содержит стиль content: "".
• После завершения вызова ajax этот класс удаляется.

Это то, что я в итоге сделал.

Класс маскировки ajax, который я использовал для targetId, я заменил на новый класс, который просто сделал некоторую прозрачность.Я сохранил класс маскирования ajax для элемента управления отправителем.

Относительно проблемы ОП

Я скачал и искал "jquery-editinplace", который использует ОП, но не смогнайти применяемый стиль content.Может быть, кто-то с хорошими инструментами поиска может найти его.Как указано в комментариях выше, проблема исчезла при обновлении Chrome.Это мой случай, из-за чего-то, возможно, связанного.

Я не разобрался в этой ситуации, поскольку у меня возникли проблемы при создании сценария ajax.Мне бы хотелось доказать, что это хромовая ошибка, и отправить ее в Google.

Не стесняйтесь комментировать, если что-то неясно, и я соответствующим образом обновлю свой ответ.

Answer 3

Для меня использование одного и того же идентификатора на нескольких

кажется неудобным.

Это может привести к странному поведению.

Сохранять свой уникальный идентификатор для DOM.

ТакжеЯ бы использовал

<div>

Вместо таблиц

, потому что с

вы можете получить больше контроля с помощью CSS.

HTML:

<div>
  <div class="editme">
    <div>Date</div>
    <div>Description</div>
    <div>Details</div>
  </div>
  <div class="editme">
    <div>Date</div>
    <div>Description</div>
    <div>Details</div>
  </div>
  <div class="editme">
    <div>Date</div>
    <div>Description</div>
    <div>Details</div>
  </div>
</div>

CSS:

.editme { clear:both; }
.editme div { float:left; }

Так что после изменения вашего HTML и CSS вот так

вы можете просто заменить эти три элемента div

с одним DIV с FORM

Вот пример версии DIV