Форум

alexgirya · #1 (**permalink**) 13.09.2015, 12:15

Друзья, на вашем форуме новенький...искал очень долго тут решение своего вопроса, не нашел к сожалению. Поэтому пришлось создать тему.
У меня есть таблица на сайте из 30 строк.
Необходимо чтобы показывались лишь первые 15 строк. А остальные 30 показывались при нажатии клавиши "ПОКАЗАТЬ ЕЩЕ" как пример.

Обыскал все в интернете, вся надежда на вас.

рони · #2 (**permalink**) 13.09.2015, 12:40

alexgirya,
Jquery то зачем? css достаточно

рони · #3 (**permalink**) 13.09.2015, 13:03

alexgirya,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  table tbody tr:nth-child(n +5),#dn{
    display:none;
  }

  td{
    border:solid 1px #004F72;
  }

  :checked~table tbody tr:nth-child(n +5){
    display:table-row;
  }

  table{
    border-collapse:collapse;
    margin:4px;
  }

  label{
    text-decoration:none;
    text-align:center;
    padding:1px 10px;
    border:solid 1px #004F72;
    border-radius:12px;
    color:#E5FFFF;
    background:#d4c794;
  }

  label:after{
    content:"Ещё ?";
    color:#E0FFFF;
  }

  :checked~label:after{
    content:"Скрыть ?";
    color:#0FF;
  }
  </style>
</head>

<body>
<input name="" type="checkbox"  id="dn">
<table width="400" summary="" >
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>    </tbody>

</table>
<label for="dn"></label>
</body>

</html>

alexgirya · #4 (**permalink**) 13.09.2015, 18:01

ООО! Спасибо.
А как сделать чтобы этот стиль привязывался только к определенной таблице под именем, как пример pick.? А то данный стиль распростроняется на все таблицы на странице.

рони · #5 (**permalink**) 13.09.2015, 18:07

alexgirya,
а подумать?
поставьте таблице class="pick" в css замените ВСЕ селекторы table на .pick кроме значений типа display:table-row;

Форум

Справочник

Discord чат

Курсы javascript