Добавление строки в таблицу с javascript = странный результат в Chrome и Safari

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проблема.

Answer 2

Я наткнулся на это сегодня. Оказалось, что у «главных строк» ​​в моей таблице был элемент display: block, из-за которого новые строки с отображением display: table-row оказываются сверху, даже если они смешаны в HTML. Имея отображение: таблица-строка на «основных строках» оставляет вставленные на место. Пойди разберись! (Только Safari)

Answer 3

Не уверен, что это проблема, но вместо:

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

попробуйте это:

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