Свернуть развернуть ячейку таблицы :: Теория :: °•°•° Проект SAMP



<style type="text/css">

    .ext-view-off { display: none; }

    /* marker for extended view */

    .ext-view-m { background-color: green; }

    td { text-align: center; }

    .yellow { background-color: yellow; }

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

function toggleView(source, tableId, tag) {

    // select elements with given tag and class 'ext-view-m' inside element with given ID

    var elems = $("#" + tableId + " " + tag + ".ext-view-m");

    elems.toggleClass("ext-view-off");

    // adding 'right' text to the switcher depending on current view state

    $(source).text( elems.is(".ext-view-off") ? "Turn detailed view on"

                                              : "Turn detailed view off");

    return false;

}

</script>

<body>

    <table id="data-table" border="1" width="100%">       

        <tbody>

            <tr>

                <td class="ext-view-m ext-view-off" rowspan="2">a</td>

                <td class="yellow"><span onclick="return toggleView(this, 'data-table', 'td')" style="cursor: pointer;">

        Turn detailed view on

    </span></td>

            </tr>

            <tr>

                <td class="yellow">x</td>

            </tr>

        </tbody>

    </table>

</body>

a	Turn detailed view on
	x

• Покеболлы и их особенности

• Язык Пикачу

• Характеры покемонов

• Электронное строение атома

• Интерактивная таблица менделеева

• Команды к игре Dota 2

• Коды к игре Heroes of Might and Magic 4

все

При копировании материала с сайта активная ссылка обязательна!