Может ли строка таблицы расширяться и закрываться?

Ответ 1

Да, строка таблицы может перемещаться вверх и вниз, но она уродлива, так как она меняет форму таблицы и заставляет все прыгать. Вместо этого поместите и элемент в каждый td... что-то, что имеет смысл как p или h2 и т.д.

Для того, чтобы реализовать переключение слайдов таблицы...

Вероятно, проще всего разместить обработчик кликов по всей таблице, .stopPropagation() и проверить, что было нажато.

Если нажать td в строке с colspan, закройте p. Если это не td в строке с colspan, затем закройте, затем переключите следующую строку p.

По сути, нужно обернуть весь ваш письменный контент в элемент внутри td s, , так как вы никогда не захотите slideUp a td или tr или измените форму таблицы

Что-то вроде:

$(function() {

      // Initially hide toggleable content
    $("td[colspan=3]").find("p").hide();

      // Click handler on entire table
    $("table").click(function(event) {

          // No bubbling up
        event.stopPropagation();

        var $target = $(event.target);

          // Open and close the appropriate thing
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
        } else {
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});​

Попробуйте этот пример jsFiddle.

... и попробуйте этот jsFiddle, показывающий реализацию переключения + - -.

HTML просто должен иметь чередующиеся строки из нескольких td, а затем строку с td colspan, большую, чем 1. Очевидно, вы можете легко настроить специфику.

HTML будет выглядеть примерно так:

<table>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>    
</table>​

Ответ 2

Вы можете сделать это следующим образом:

HTML

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td><a href="#" id="show_1">Show Extra</a></td>
    </tr>
    <tr>
        <td colspan="5">
            <div id="extra_1" style="display: none;">
                <br>hidden row
                <br>hidden row
                <br>hidden row
            </div>
        </td>
    </tr>
</table>

JQuery

$("a[id^=show_]").click(function(event) {
    $("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow");
    event.preventDefault();
});

См. демонстрацию на JSFiddle

Надеюсь, это поможет!

Ответ 3

Это зависит от вашей наценки, но это, безусловно, может быть сделано для работы, я использовал следующее:

JQuery

$(document).ready(
  function() {
  $('td p').slideUp();
    $('td h2').click(
      function(){
       $(this).siblings('p').slideToggle();
      }
      );
  }
  );

HTML

  <table>
  <thead>
    <tr>
      <th>Actor</th>
      <th>Which Doctor</th>
      <th>Significant companion</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><h2>William Hartnell</h2></td>
      <td><h2>First</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
      <td><h2>Susan Foreman</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
    </tr>
    <tr>
      <td><h2>Patrick Troughton</h2></td>
      <td><h2>Second</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
      <td><h2>Jamie MacCrimmon</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
    </tr>
    <tr>
      <td><h2>Jon Pertwee</h2></td>
      <td><h2>Third</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
      <td><h2>Jo Grant</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
    </tr>
  </tbody>
</table>

То, как я к нему подошел, - это свернуть отдельные элементы внутри ячеек строки, так что в моем случае строка slideUp() была бы скрыта, и все же оставить элемент h2, чтобы щелкнуть для повторного показа содержимого. Если строка полностью разрушилась, не было бы легко очевидного способа вернуть ее.

Демо в JS Bin

Как отметил @Peter Ajtai, в комментариях вышеупомянутый подход фокусируется только на одной ячейке (хотя и преднамеренно). Чтобы развернуть все дочерние элементы p, это будет работать:

$(document).ready(
  function() {
  $('td p').slideUp();
    $('td h2').click(
      function(){
       $(this).closest('tr').find('p').slideToggle();
      }
      );
  }
  );

Демо в JS Bin

Ответ 4

Чтобы ответить на ваш вопрос, нет. Это было бы возможно с div. Вопрос только в том, что это вызвало бы опасение, если бы функциональность выполнялась с помощью div, а не таблиц.

Ответ 5

Хорошо, я бы сказал, что вместо DIV вместо таблицы использовать DIV, так как это было бы намного проще (но нет ничего плохого в использовании таблиц).

Моим подходом было бы использовать jQuery.ajax и запрашивать больше данных с сервера и таким образом, выбранный DIV (или TD, если вы используете таблицу) будет автоматически расширяться на основе запрошенного содержимого.

Таким образом, он экономит полосу пропускания и ускоряет работу, так как вы не загружаете весь контент сразу. Он загружается только тогда, когда он выбран.

Ответ 6

JQuery

$(function() {
    $("td[colspan=3]").find("div").hide();
    $("tr").click(function(event) {
        var $target = $(event.target);
        $target.closest("tr").next().find("div").slideToggle();                
    });
});

HTML

<table>
    <thead>
        <tr>
            <th>one</th><th>two</th><th>three</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td><p>data<p></td><td>data</td><td>data</td>
        </tr>
        <tr>
            <td colspan="3">
                <div>
                    <table>
                            <tr>
                                <td>data</td><td>data</td>
                            </tr>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Это похоже на предыдущий пример выше. Я обнаружил, что при попытке реализовать этот пример, если бы была нажата строка таблицы, которую нужно было развернуть, пока она не была расширена, она исчезнет, ​​и она больше не будет расширяться

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

Я также внес некоторые незначительные изменения в html и соответствующий jQuery.

ПРИМЕЧАНИЕ. Я бы только что сделал комментарий, но мне пока не разрешили длинный пост. Просто хотел опубликовать это, поскольку мне потребовалось немного, чтобы понять, что происходит с исчезающей таблицей строк.

Надеюсь, это поможет кому-то!

кредит Питеру Айтаю