0

ユーザーがテキストをクリックしたときに ajax を介して取得した情報を含むテーブルの上に div 要素を追加しています。ユーザーがクリックしたレコードの直後に情報を表示する必要があります。社内で使用しているため、Chrome と IE9 のみをサポートする必要があります。Chrome は必要なことを行っていますが、IE9 は気に入っていません。

jQuery の .after 関数を使用して、ユーザーがクリックしたテーブル行の直後に div を配置します。どちらのブラウザも div を本来あるべき場所に配置しますが、IE9 は css を新しい要素に適用しません。

 <table>
   <tr><td>blahblah1</td><td class="secondRow">secondRow1</td><td class="thirdRow">thirdrow1</td></tr>
   <tr><td>blahblah2</td><td class="secondRow">secondRow2</td><td class="thirdRow">thirdrow2</td></tr>
   <tr><td>blahblah3</td><td class="secondRow">secondRow3</td><td class="thirdRow">thirdrow3</td></tr>
   <tr><td>blahblah4</td><td class="secondRow">secondRow4</td><td class="thirdRow">thirdrow4</td></tr>
   <div class="ajaxedInfo">control group</div>
   <tr><td>blahblah5</td><td class="secondRow">secondRow5</td><td class="thirdRow">thirdrow5</td></tr>
</table>

$('.secondRow').click(function(){
   $('.ajaxedInfo').remove();
   $('.inlineCSS').remove();
   $(this).parent().after('<div class="ajaxedInfo">ajaxed info coming in about</div>');
});

$('.thirdRow').click(function(){
   $('.ajaxedInfo').remove();
   $('.inlineCSS').remove();
   $(this).parent().after('<div class="inlineCSS" style="position:absolute;background:#c6c6c6;">inline css doesn\'t work either</div>');
});

.secondRow
{
cursor:pointer;
border:1px solid black;
}
.thirdRow
{
cursor:pointer;
}
.ajaxedInfo
{
position:absolute;
background:#cccccc;
width:300px;
text-align:center;
border:1px solid black;
}

これは私が遊んでいたフィドルで、 http://jsfiddle.net/QyUwA/4/を示してい ます

私は周りを見回しましたが、IE7 が同様のことを行うには多くの問題があるようです。人々は要素を再描画することを提案します。追加後に div を非表示にしてから表示しようとしましたが、それは役に立ちませんでした。

4

1 に答える 1

1

代わりに表の行を使用してください。

このような：

$(this).parent().after('<tr class="ajaxedInfo"><td colspan="3">ajaxed info coming in about</td></tr>');

http://jsfiddle.net/QyUwA/4/

--例で編集。

于 2013-09-18T19:02:57.447 に答える