jQuery slideToggle () таблица-строка с вложенной таблицей - PullRequest
Новая
       39

jQuery slideToggle () таблица-строка с вложенной таблицей

2 голосов
/ 15 октября 2011

В настоящее время у меня есть проблема с эффектом jQuery slideToggle () для строки таблицы с вложенной таблицей.

У меня есть следующая разметка HTML: 

<table>
  <tbody>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
    <tr class="show-details">
      <td>Item1</td>
      <td>Item2</td>
      <td>Item3</td>
    </tr>
    <tr class="details">
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <td>Lorem Ipsum</td>
              <td>Ipsum Lorem</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr class="show-details">
      <td>Item1</td>
      <td>Item2</td>
      <td>Item3</td>
    </tr>
    <tr class="details">
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <td>Lorem Ipsum</td>
              <td>Ipsum Lorem</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Я хочу сразу скрыть строку сведений и показать ее с помощью функции slideToggle ().У меня есть следующий код JQuery: 

$(function() {
  $(".details").hide();
  $('.show-details').click(function(e){
    $(this).next(".details").slideToggle(500);
    $("td > span", this).toggleClass('open')
  });
});

Проблема в том, что строка выходит из отображения: нет;для отображения: таблица-строка;что приводит к display:none; до display:block; до display:table-row;.Затем эффект переходит к блоку отображения, затем анимирует высоту строки (+ переполняет ее на тонну, поэтому следующая строка спрыгивает вниз на несколько секунд), а затем, наконец, превращается в display:table-row;, когда анимация заканчивается.

Любые предложения, чтобы эффект работал с простым слайд-тогглом для отображения строки .detail?

Я попробовал ответы в на этот вопрос , но безуспешно.

Ответы [ 4 ]

4 голосов
/ 15 октября 2011

Я думаю, что это неотъемлемая дисфункция клеток таблицы. Решение состоит в том, чтобы заменить их на стилизованные DIV: 

<style type="text/css">
.cell {
    display: inline-block;
    border: 1px solid;
}
.head {
    font-weight: bold;
}
.head .cell, .row .cell {
    width: 50px;
}
.details .cell {
    width: 75px;
}
</style>


<div class="head">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
</div>
<div class="row show-details">
    <div class="cell">Item1</div>
    <div class="cell">Item2</div>
    <div class="cell">Item3</div>
</div>
<div class="row details">

    <div class="row">
        <div class="cell">Lorem Ipsum</div>
        <div class="cell">Ipsum Lorem</div>
    </div>
</div>    

<div class="row show-details">
    <div class="cell">Item1</div>
    <div class="cell">Item2</div>
    <div class="cell">Item3</div>
</div>
<div class="row details">

    <div class="row">
        <div class="cell">Lorem Ipsum</div>
        <div class="cell">Ipsum Lorem</div>
    </div>

</div>

http://jsfiddle.net/mblase75/mv7Y5/1/

1 голос
/ 06 июня 2012

На самом деле есть способ получить тот же эффект с вложенными таблицами - вы были на правильном пути с самого начала, но ваш jQuery был не прав. С помощью jQuery от Gravity я смог просто присвоить классы соответствующей строке таблицы, и все это прекрасно работает.

HTML 

<table>
            <thead>
              <tr>
                <th>Month</th>
                <th>From Date</th>
                <th>To Date</th>
                <th>Execution Date</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
         <tr class="row show-details odd">
                <td>4-APR</td>
                <td>TExt</td>
                <td>&nbsp;</td>
                <td>05/06/2011</td>
                <td>Done</td>
             </tr>
<tr class="row details">
    <td colspan="5">
<table>
        <thead>
         <tr>
          <th>File Name</th>
          <th>Date Created</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
                  <td>Aetna XLS</td>
          <td>05/06/2011</td>
        </tr>
        <tr class="even">
          <td>XLS</td>
          <td>05/06/2011</td>
        </tr>
        <tr class="odd">
          <td>XLS</td>
          <td>05/06/2011</td>
        </tr>
     </tbody>
</table>

CSS 

.cell {
    display: inline-block;
}
.head {
    font-weight: bold;
}
.head .cell, .row .cell {
    width: 100%;
}
.details .cell {
    width: 100%;
}

JQuery 

<script>   
$(function() {
    $(".details").hide();
    $('.show-details').click(function(e) {
        $(this).next(".details").fadeToggle(500);
//      $("td > span", this).toggleClass('open')
    });
});
</script>

Таким образом, мне не нужно было переделывать весь мой CSS, структуру таблиц или даже вообще касаться моих таблиц. Я просто назначил классы на ТР и вуаля!

0 голосов
/ 14 мая 2014

Если вы действительно хотите использовать TR, потому что вы не хотите переписывать его, добавьте этот CSS, чтобы при переключении он переходил в «блок» вместо «строка таблицы» 

tr{
     display:block
};
0 голосов
/ 15 октября 2011

действительно попробуйте использовать стилизованный ответ divs.В противном случае, у меня была лучшая согласованность между браузерами с fadeToggle (500) для скрытия и отображения строк таблицы в IE.Опять же, вам все равно нужно будет подтвердить, что поведение fadeToggle приемлемо. 

$(function() {
//seriously consider styling these as display:hidden on load
  $(".details").hide(); 
  $('.show-details').click(function(e){
    $(this).next(".details").fadeToggle(500);
    $("td > span", this).toggleClass('open')
  });
});
...