在表中添加一行javascript =奇怪的結果在Chrome和safari中

當我點擊任何存在的行時，我必須添加一個新行，其內容由ajax查詢填充。在ie8，ff3.6，opera11中一切正常，但在chrome10和safari5中，即使HTML代碼排序良好，該行也始終顯示爲第一行。在表中添加一行javascript =奇怪的結果在Chrome和safari中

JavaScript的使用是在這裏：

jQuery('.tx_tacticinfocours_pi1_cour_line').click(function(){ 
    if(running==false){ 
     running=true; 
     jQuery('.cour_detail_temp_inner').slideUp(500, function() { 
      jQuery(this).parents('.cour_detail_temp').remove(); 
     }); 
     var td=jQuery(this).after('<tr class="cour_detail_temp"><td colspan="8" style="padding: 0pt;"><div class="cour_detail_temp_inner" style="display: none;"></div></td></tr>'); 
     td=td.next().find('.cour_detail_temp_inner'); 
     var url=jQuery(this).find('.tx_tacticinfocours_pi1_detail_link a').attr('href'); 

     td.load(url,function(){ 
      jQuery(this).slideDown(500,function(){running=false;}); 
     }); 
    } 
});

這裏是HTML（這是TYPO3模板）：

<table class="tx_tacticinfocours_pi1_liste" border="0" cellspacing="0" cellpadding="0"> 

<tr> 
    <th>###TITRE_WEB###</th> 
    <th>###TITRE_PDF###</th> 
    <th>###TITRE_DETAILS###</th> 
    <th>###TITRE_SIGLE###</th> 
    <th>###TITRE_TITRE###</th> 
    <th>###TITRE_ENLIGNE###</th> 
    <th>###TITRE_ENSEIGNANT###</th> 
    <th>###TITRE_RESPONSABLE###</th> 
</tr> 

<!-- ###COURS### begin --> 
<tr class="tx_tacticinfocours_pi1_cour_line"> 
    <td class="tx_tacticinfocours_pi1_link"><!-- ###COURS_LINK### begin -->###COURS_WEB_IMAGE###<!-- ###COURS_LINK### end --></td> 
    <td class="tx_tacticinfocours_pi1_link"><!-- ###PDF_LINK### begin -->###PDF_IMAGE###<!-- ###PDF_LINK### end --></td> 
    <td class="tx_tacticinfocours_pi1_link tx_tacticinfocours_pi1_detail_link"><!-- ###DETAILS_LINK### begin -->###DETAILS_IMAGE###<!-- ###DETAILS_LINK### end --></td> 
    <td class="tx_tacticinfocours_pi1_sigle" nowrap>###COURS_SIGLE###</td> 
    <td class="tx_tacticinfocours_pi1_titre">###COURS_TITRE###</td> 
    <td class="tx_tacticinfocours_pi1_enligne">###COURS_ENLIGNE###</td> 
    <td class="tx_tacticinfocours_pi1_enseignant" nowrap>###COURS_ENSEIGNANT###</td> 
    <td class="tx_tacticinfocours_pi1_responsable" nowrap>###COURS_RESPONSABLE###</td> 
</tr> 
<!-- ###COURS### end -->

你有任何想法，爲什麼它這樣做或任何解決？

來源

2011-04-05 Jonatan Cloutier

你能否也給我們相關的html？ – Zirak 2011-04-05 15:15:34

html是一些模板形式，但我在一分鐘內添加它 – 2011-04-05 15:19:51

我不知道，但嘗試關閉： var td=jQuery(this).after(...)

到： var td=jQuery('<tr class="cour_detail_temp"><td colspan="8" style="padding: 0pt;"><div class="cour_detail_temp_inner" style="display: none;"></div></td></tr>').appendTo(this);

我想你已經走了沒有比javascript問題更多的CSS問題。

來源

2011-04-05 15:54:17 Zirak

這實際上是添加一個TR內部點擊tr是無效AFAIK和insertAfter我得到了完全相同的問題。我認爲它可能更多的是在表格中間插入行的webkit問題，所以它是渲染引擎，我必須欺騙... – 2011-04-05 16:28:12

事情是，我用jsfiddle試過了，它工作正常。 [Here's]（http://jsfiddle.net/k68qe/）稍有修改的版本。使用Chrome 10進行測試，並在廣告中顯示錶格下方的新表格行。 – Zirak 2011-04-05 16:34:19

是的，我剛剛測試了真正的數據，它真的工作，一個區別：我使用jquerry 1.5.2而不是1.5.1我可能會測試，當返回一個辦公室（我現在無法訪問代碼） – 2011-04-05 16:58:09

不知道這是問題，但不是：

var td=jQuery(this).after(...)

試試這個：

var td=jQuery(this).parent().after(...)

來源

2011-04-05 15:20:35

這樣做是在之後添加，這與您給出的代碼合乎邏輯，但在HTML中沒有意義。仍然感謝 – 2011-04-05 15:24:46

今天我偶然發現了這個。原來，我的表中的「主要行」有display：block，這使得新的行顯示：即使在HTML中混合了表格行，也會顯示最上面的行。顯示：「主行」上的表格行保留插入的位置。去搞清楚！（只限野生動物園）

來源

2012-10-01 12:40:26

在表中添加一行javascript =奇怪的結果在Chrome和safari中

回答

相關問題