javascript - 在 Chrome 和 safari 中使用 javascript 在表中添加行 = 奇怪的结果

Question

当我单击存在的任何行时，我必须添加一个新行，其中包含从 ajax 查询填充的内容。在 ie8、ff3.6、opera11 中一切正常，但在 chrome10 和 safari5 中，即使 HTML 代码顺序正确，该行始终显示为第一行。

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

您知道它为什么这样做或有任何变通办法吗？

Answer 1

我不确定，但请尝试转动: 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);

我认为你遇到的更多是 css 问题而不是 javascript 问题。