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

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

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

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

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

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

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

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

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

javascript google-chrome ajax html-table
person Jonauz    schedule 12.06.2011    source источник
comment
Я получаю именно эту проблему, похоже, она еще не исправлена.   -  person Samuel    schedule 26.01.2012
comment
Можете ли вы показать, как вы вставляете редактируемую строку? (скрипт(   -  person SergeS    schedule 26.01.2012
comment
Если вы используете такие вещи, как document.getElementById('tr_id').innerHTML = '<td>Cell 1</td>';, это может вызвать это. Попробуйте appendChild или insertBefore, если да.   -  person Ranty    schedule 01.02.2012
comment
Можете ли вы поместить сгенерированный HTML-код в сервис, такой как JSFiddle, чтобы мы могли видеть код таблицы?   -  person rxgx    schedule 01.02.2012
comment
Не происходит в очень простом примере в Chrome v13. Вы пробовали более поздние версии? Как вы вставляете результат в свою таблицу?   -  person Julian D.    schedule 01.02.2012
comment
Не уверен, как вы редактируете всю строку, но, казалось бы, имеет смысл просто редактировать ячейки, и это решит проблему замены строки. Вот пример: jsfiddle.net/Qm6cf/4   -  person Phil McCullick    schedule 02.02.2012
comment
Здесь есть ошибка. Я имею ту же самую проблему. Таблица правильная, даже копирование HTML с помощью инструментов разработчика проверяется в отдельном html-файле. Я использую TR в качестве частичного контейнера для замены всех TD.   -  person Valamas    schedule 22.05.2012

Ответы (3)


arrow_upward
3
arrow_downward

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

person Alexander Pavlov    schedule 27.01.2012
comment
Прикреплен скриншот отрендеренного дома плюс то, что показано в инспекторе. HTML правильный и идентичен следующей строке. www.richardson.co.nz/chrome_error.png - person Samuel; 28.01.2012
comment
Если у вас нет особенно странного стиля CSS для первой строки (tr:first-child или подобного), то это ошибка перекомпоновки WebKit. Воспроизведение этой проблемы в Safari превратит ее в верную ошибку WebKit, а не в Chrome. Вы можете сообщить об этом в системе отслеживания ошибок WebKit по адресу bugs.webkit.org/enter_bug.cgi (сначала вам нужно быстро зарегистрироваться.) - person Alexander Pavlov; 28.01.2012
comment
Так что этот баг был временным, теперь не могу пересоздать после перезагрузки. Копия хрома, на которой он проявил себя, была открыта около 100+ часов. - person Samuel; 13.02.2012
comment
Рад слышать! Теперь, когда выпущена новая стабильная версия, не стесняйтесь попробовать ее и посмотреть, нет ли там проблемы. - person Alexander Pavlov; 13.02.2012
comment
Пробовал перезагрузку и очистку кеша. Нет мне радости. Я использую Chrome 19 и теперь ожидаю, что другие бедолаги найдут этот вопрос. - person Valamas; 22.05.2012

arrow_upward
0
arrow_downward

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

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

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

В деталях это то, что у меня было.

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

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

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

Касается проблемы ОП

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

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

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

person Valamas    schedule 05.02.2013

arrow_upward
-1
arrow_downward

Мне кажется неудобным использовать один и тот же идентификатор для нескольких ‹tr>.

Это может вызвать какое-то странное поведение.

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

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

<div>

Вместо столов

потому что с ‹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

person jwchang    schedule 02.02.2012
comment
Это определенно табличные данные, отсюда и макет таблицы. - person Samuel; 13.02.2012