Обновление TR после модификации TD - PullRequest
Новая
       4

Обновление TR после модификации TD

1 голос
/ 05 июля 2011

У меня есть табличный тег с trs и tds. Во время выполнения я добавляю изображение к одному из tds и одновременно перемещаю его, чтобы перекрыть старые данные в td. Это показывает хорошее наложение изображения, но размер td после изменения не возвращается обратно к соответствующему. Теперь, когда изображение переместилось, пространство осталось под ним в тд. Я хочу иметь возможность перерисовать или обновить tr для правильного отображения данных. Я попытался изменить атрибуты стиля тд, чтобы система была вынуждена обновить страницу. Но без изменений. Пожалуйста, помогите мне с этим. 

    imgstring = "<img src='Images/comment.JPG' width='60' height='42' alt='' title='' class='forImg' />";
var obj = document.getElementById("id for a td");
var leftCoord = $(obj).offset().left;
var topCoord = $(obj).offset().top;

$(imgstring).appendTo(obj).css({'visibility':'visible',
                'top':function(index,value){return value = -($(this).offset().top - topCoord) + "px";},
                 'left':function(index,value){return value = -($(this).offset().left - leftCoord) + "px";},
                 });

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

Заранее спасибо,

Ответы [ 3 ]

1 голос
/ 05 июля 2011

Установить триггер для события td и прослушиватель для события tr: 

$(imgstring).appendTo(obj).css({'visibility':'visible',
                'top':function(index,value){return value = -($(this).offset().top - topCoord) + "px";},
                 'left':function(index,value){return value = -($(this).offset().left - leftCoord) + "px";},
                 }).trigger('td_updated');

$('tr').live('td_updated',function()
{
  // resize tr to match new height of td
});
0 голосов
/ 05 июля 2011

Ваша проблема не имеет отношения к обновлению страницы.Чтобы CSS «top» и «left» значения работали, необходимо, чтобы CSS «position» был установлен в абсолютное, относительное или фиксированное значение, но вы этого не показываете.Я предполагаю «относительный», и в этом случае пространство, выделенное для изображения в его исходном положении, остается даже после того, как само изображение было смещено.

Вы можете удалить это, установив полеправильное значение на img равно минус ширина изображения.

0 голосов
/ 05 июля 2011

Я сохраняю свой другой ответ, потому что вижу его полезным для другого человека, но это, по сути, то, что вам нужно для вашего конкретного случая:

CSS: 

    td img {
        vertical-align:bottom;
    }

Просто так;)

Вот пример: http://jsfiddle.net/AlienWebguy/SQGwa/5/

Фактическая проблема вызвана DOCTYPE и тем, как он интерпретирует разрывы строк в вашем коде.

Это не вызовет этой проблемы: 

<td><img src="whatever /></td>

Это будет: 

<td>
    <img src="whatever" />
</td>

Похоже, что когда jQuery добавляет узел img, он форматирует код таким образом, чтобы вызвать эту проблему.

...