td colspan не работает при использовании jquery show / hide ()

Question

У меня есть оглавление

<table>
<thead>
  <tr>
    <th>First Name </th>
    <th>Last Name </th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr class="odd">
    <td>John</td>
    <td>Deo</td>
    <td><a class="personal-checking-more-link">More</a></td>
  </tr>
  <tr><td style="display:none" colspan="3">Description goes for 1st row</td></tr>
  <tr class="odd">
    <td>Jaden</td>
    <td>Aidan</td>
    <td><a class="personal-checking-more-link">More</a></td>
  </tr>
  <tr><td style="display:none" colspan="3">Description goes for 2nd row</td></tr>
</tbody>

Когда я нажимаю More , отображается 1-й ряд Description. это показывает, но Colspan не работает.

вот мой код js

personalChecking = function () {
        $('a.personal-checking-more-link').click(function() {
            $(this).parent().parent().next().toggle('slow');
        });

    }
$(document).ready(personalChecking);

Заранее спасибо

Answer 1

Это проблема с 'display: block'

Пожалуйста, обратитесь по ссылке ниже http://thedesignspace.net/MT2archives/000376.html#.UUrg3FfCd1u

Если вы скрываете tr, используйте «display: table-row» вместо «display: block» для отображения этого tr,

Если вы скрываете td, используйте «display: table-cell» вместо «display: block» для отображения этого td

Answer 2

Проблема заключается в стиле, применяемом при отображении элемента. Он устанавливает стиль «display: block», который, кажется, портит colspan. Вот некоторые обходные пути, которые я придумала, но они не идеальны.

У этого есть отрывочная анимация:

personalChecking = function () {
    $('a.personal-checking-more-link').click(function() {
        $(this).parent().parent().next().toggle('slow', function() {
            if($(this).css('display') == 'block')
            {
                $(this).css('display', '');
            }               
        });
    });
}

А у этого вообще нет анимации:

personalChecking = function () {
    $('a.personal-checking-more-link').click(function() {
        var nextRow = $(this).parent().parent().next();
        if(nextRow.css('display') == 'none')
        {
            nextRow.css('display','');
        }
        else
        {
            nextRow.css('display', 'none');
        }
    });
}

Answer 3

Лучший способ сделать это - использовать обратный вызов

personalChecking = function () {
    $('a.personal-checking-more-link').click(function() {
        $(this).parent().parent().next().show('slow', function() {           
            $(this).attr("colspan", "3");
        });
    });
}

таким образом, FireFox и Chrome будут знать, как точно отобразить тд

Answer 4

Вы пробовали это без анимации? т.е. просто toggle ()

У меня та же проблема, похоже, что анимированные переключатели не приводят к появлению TD с COLSPAN. Я получаю все содержимое строки в одном из столбцов без COLSPAN. Когда я переключаю его на обычный toggle (), все работает.

Answer 5

Я обнаружил, что проблема firefox заключается в том, что a должен иметь display: table-row. Ошибка IE кажется правильной, поскольку ее ошибки интерпретируются как стандартное поведение.

Таким образом, лучшее решение - использовать addClass ("someClass") и removeClass ("someClass"), чтобы скрыть вещи. (с правилом CSS: someClass {display: none;})

Недостатком является отсутствие анимации. Мое решение может справиться с этим. Если нет, то вы можете как-нибудь написать скрипт в css ('display', 'table-row').

-Clint

Answer 6

Проблема в том, что вы переключаете TR, а не TD внутри него

$(this).parent().parent().next()
   1      2         3       4

• 1 - это A

• 2 - это TD, в котором находится 1

• 3 - это TR, в котором находится 2

• 4 - это TR ниже 3

Но ваш дисплей: ни один не находится на ТД в этом.

Поэтому я бы порекомендовал:

$("td",$(this).parent().parent().next()).toggle('slow');

где внутренний $ получит содержащий TR, а затем вы будете использовать его в качестве контекста для выбора "td".

Answer 7

Попробуйте это в своем коде:

$('a.personal-checking-more-link').click(function() {
    var descriptionTR = $(this).parent().parent().next();
    $(descriptionTR).toggle('slow').colSpan = 3;
});

http://www.nabble.com/IE7:-Setting-ColSpan-as-Attribute-td21252688s27240.html

Answer 8

Извините, это была моя ошибка. Тег style должен находиться в TR , а не в TD

  <tr style="display:none"><td colspan="3">Description goes for 1st row</td></tr>
  <tr style="display:none"><td colspan="3">Description goes for 2nd row</td></tr>

Answer 9

В прошлом у меня были проблемы с jQuery, а также с отображением и скрытием / скольжением строк таблицы, в конце концов мне пришлось получить jQuery, чтобы обернуть выбранный тд в div, а затем показать / скрыть это, не очень хорошо, я знаю, но на сжатые сроки это сработало.

Просто стоит иметь в виду, если у вас есть похожие проблемы с анимацией.