1

trs と tds を持つテーブル タグがあります。実行時に、td の 1 つにイメージを追加し、同時にそれを移動して、td 内の古いデータをオーバーラップさせます。これは画像オーバーレイをうまく表示しますが、一度変更された td のサイズは適切に戻りません。画像が移動したので、td でその下にスペースが残されます。tr を再描画または更新して、データを適切に表示できるようにしたいと考えています。システムがページの更新を強制されるように、td のスタイル属性を変更しようとしました。しかし、変化はありません。これで私を助けてください。

    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";},
                 });

上記のコードはオーバーラップを適切に設定しますが、画像を移動した後に残っているスペースは削除されません。

前もって感謝します、

4

3 に答える 3

1

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
});
于 2011-07-05T05:51:39.830 に答える
0

あなたの問題は、ページの更新とは関係ありません。CSS の「上」と「左」の値を機能させるには、CSS の「位置」を絶対、相対、または固定に設定する必要がありますが、これは表示されません。私の推測は「相対的」です。その場合、画像自体が移動された後でも、元の位置にある画像に割り当てられたスペースが残ります。

img の margin-right 値をイメージの幅から引いた値に設定することで、これを削除できる場合があります。

于 2011-07-05T13:17:50.220 に答える
0

別の個人にとって有用であることがわかるため、他の回答を保持していますが、これは基本的に、特定のケースに必要なものです。

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 ノードを追加すると、この問題を引き起こすような方法でコードをフォーマットするように見えます。

于 2011-07-05T06:28:20.823 に答える