Показать сообщение отдельно
  #7 (permalink)  
Старый 24.02.2017, 14:15
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 80

Или так если понятнее. В коде явно присутствует ошибка, так как один из классов as не разворачивает свои строки
<head>

 <title>HTML код таблицы</title>

 <link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">

 <script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
 
 <script> 

function show_hide(_class) {

    var tr = document.querySelectorAll(_class);

    for (var i = 0; i < tr.length; ++i)  tr[i].setAttribute('style',  tr[i].getAttribute('style') ? "" : "display:none");  

}

</script> 

<script> $(document).ready(function(){

        $('#myTable').DataTable();

    });</script>
    
 </head>

<body>

    <table border="1" id="myTable" class="display">

        <thead>

            <tr>

                <th colspan="6">

                <table><thead><tr>

                <td onclick="show_hide('.as1')">Надо развернуть1</td>

                <td onclick="show_hide('.as2')">Надо развернуть2</td>

                <td onclick="show_hide('.as3')">Надо развернуть3</td>

                <td onclick="show_hide('.as4')">Надо развернуть4</td>

                <td onclick="show_hide('.as5')">Надо развернуть5</td>

                <td onclick="show_hide('.as6')">Надо развернуть6</td>

                </tr></thead></table>

                </th>

            </tr>

            <tr>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </thead>

        <tbody>

            <tr class="as1" style="display:none">

                <th>Tiger Nixon</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as1" style="display:none">

                <th>Tiger Nixon2</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as2" style="display:none">

                <th>Garrett Winters</th>

                <th>Accountant</th>

                <th>Tokyo</th>

                <th>63</th>

                <th>2011/07/25</th>

                <th>$170,750</th>

            </tr>

                <tr class="as2" style="display:none">

                <th>Garrett Winters</th>

                <th>Accountant</th>

                <th>Tokyo</th>

                <th>63</th>

                <th>2011/07/25</th>

                <th>$170,750</th>

            </tr>

            <tr class="as3" style="display:none">

                <th>Ashton Cox</th>

                <th>Junior Technical Author</th>

                <th>San Francisco</th>

                <th>66</th>

                <th>2009/01/12</th>

                <th>$86,000</th>

            </tr>

            <tr class="as3" style="display:none">

                <th>Ashton Cox</th>

                <th>Senior Javascript Developer</th>

                <th>Edinburgh</th>

                <th>22</th>

                <th>2012/03/29</th>

                <th>$433,060</th>

            </tr>

            <tr class="as3" style="display:none">

                <th>Ashton Cox</th>

                <th>Accountant</th>

                <th>Tokyo</th>

                <th>33</th>

                <th>2008/11/28</th>

                <th>$162,700</th>

            </tr>

            <tr class="as4" style="display:none">

                <th>Cedric Kelly</th>

                <th>Integration Specialist</th>

                <th>New York</th>

                <th>61</th>

                <th>2012/12/02</th>

                <th>$372,000</th>

            </tr>

            <tr class="as4" style="display:none">

                <th>Cedric Kelly</th>

                <th>Sales Assistant</th>

                <th>San Francisco</th>

                <th>59</th>

                <th>2012/08/06</th>

                <th>$137,500</th>

            </tr>

            <tr class="as5" style="display:none">

                <th>Airi Satou</th>

                <th>Integration Specialist</th>

                <th>Tokyo</th>

                <th>55</th>

                <th>2010/10/14</th>

                <th>$327,900</th>

            </tr>

            <tr class="as5" style="display:none">

                <th>Airi Satou</th>

                <th>Javascript Developer</th>

                <th>San Francisco</th>

                <th>39</th>

                <th>2009/09/15</th>

                <th>$205,500</th>

            </tr>

            <tr class="as5" style="display:none">

                <th>Airi Satou</th>

                <th>Software Engineer</th>

                <th>Edinburgh</th>

                <th>23</th>

                <th>2008/12/13</th>

                <th>$103,600</th>

            </tr>

            <tr class="as6" style="display:none">

                <th>Brielle Williamson</th>

                <th>Office Manager</th>

                <th>London</th>

                <th>30</th>

                <th>2008/12/19</th>

                <th>$90,560</th>

            </tr>

        </tbody>

    </table> 

</body>

Последний раз редактировалось JAMLIGHT, 24.02.2017 в 14:21.
Ответить с цитированием