0

Есть несколько таблиц, как на примере.

<script>
$(document).ready(function(){
  $("tr.tbl").click(function(){
    $(this).next("tr.hide").slideToggle("slow");
});
});
</script>
    <!-- Таблица 1 -->
<table border=1 class="">
  <tr class="tbl">
    <td>SH1</td>
  </tr>
  <tr>
    <td>
      <table border=1>
    <tr class="tbl"><td>SH2</td></tr>
    <tr class="hide" style="display:none">
      <td>
        <table><tr><td>INFO</td></tr></table>
      </td>
    </tr>
      </table>
    </td>
   </tr>
</table>

<!-- Таблица 2 -->
...
...
<!-- Таблица N -->

Как сделать, чтобы и при нажатии на "Шапка 1" либо "Шапка 2" разворачивалась "ИНФА".

2 ответа 2

1
<table class="swtable">
    <tr class="switch"><td>Шапка 1</td></tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>Шапка 2</td>
                </tr>   
                <tr class="switched" style="display:none">
                    <td><table><tr><td>Инфа<td><tr></table></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<script type="text/javascript">
$('table.swtable tr.switch').click(function(){
    var n = $('tr.switch').index(this);
    $('tr.switched').eq(n).toggle();
});
</script>

Решение не слишком "чистое" и не слишком удобное (скорость за счет удобства). Но вы можете его доработать под себя.

ДОБАВЛЕНО

<table class="swtable">
    <tr class="switch"><td>Шапка 1</td></tr>
    <tr>
        <td>
            <table>
                <tr class="switch">
                    <td>Шапка 2</td>
                </tr>   
                <tr class="switched" style="display:none">
                    <td><table><tr><td>Инфа<td><tr></table></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<script type="text/javascript">
$('table.swtable tr.switch').click(function(){
    $(this).closest('table.swtable').find('tr.switched').toggle();
});
</script>
9
  • Что-то я туплю..этот вариант рабочий?
    – Alangel
    14 дек 2011 в 12:34
  • Вариант рабочий, отредактируйте его под себя.
    – ling
    14 дек 2011 в 12:44
  • Значит туплю..вставляю код и не работает, так же как и с .find
    – Alangel
    14 дек 2011 в 12:55
  • у меня не заработал. скопировал 1 в 1
    – iurii_n
    14 дек 2011 в 12:59
  • Упс. Опечатался: надо tr.switched. Исправил.
    – ling
    14 дек 2011 в 13:01
0
<table border=1>
  <tr class="tbl" id="shp1"><td>Шапка 1</td></tr>
    <td>
      <table border=1>
    <tr class="tbl">
      <td>Шапка 2</td>
    </tr>   
    <tr class="hide" style="display:none">
      <td><table><tr><td>Инфа<td><tr></table></td>
    </tr>
      </table>
    </td>
   </tr>
</table>

js:

$(document).ready(function(){
  $("tr#shp1").click(function(){
    $("tr.hide").slideToggle("slow");
});
});

или если id на шапка 1 не подходит:

$(document).ready(function(){
  $("tr.tbl").click(function(){
    $("tr.hide").slideToggle("slow");
});
});
6
  • во втором случает ИНФА откроется и по клику на Шапка2. потому что клик обрабатывается по классу, а класс на 2х tr. именно поэтому на шапку 1 я повесил идентификатор. Еще как вариант можно использовать $("tr.tbl:first").click(function(){...});
    – iurii_n
    14 дек 2011 в 10:39
  • Извиняюсь, не так задал вопрос. Если формируется несколько таких таблиц, во всех классы одинаковые, но при нажатии "Шапка 1" и "Шапка 2" разворачивается только текущая таблица.
    – Alangel
    14 дек 2011 в 10:49
  • тогда так: $(this).find("tr.hide").slideToggle("slow");
    – iurii_n
    14 дек 2011 в 11:03
  • непонятно почему, но .find почему-то вообще не прокатывает. olgachan.com/1.html
    – Alangel
    14 дек 2011 в 12:20
  • приведите в порядок разметку. а то у вас там есть лишние и недостающие элементы после закрывающего tr не может быть td...
    – iurii_n
    14 дек 2011 в 13:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.