Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   как обратьтися к элементам не по ID ? (https://javascript.ru/forum/xhtml-html-css/67551-kak-obrattisya-k-ehlementam-ne-po-id.html)

JAMLIGHT 23.02.2017 20:09
как обратьтися к элементам не по ID ?
 
Здесь таблица с поиском срываемых элементов по ID. Но так как ID должен быть уникален нет возможности набросать в таблицу множество скрываемых по клику строк. На что можно заменить document.getElementById? Приведите пример с обращением например через класс или другие способы

<html>

<body>

<table>

<tr><td onclick="show_hide('row1');">Показать1</td>

    <td onclick="show_hide('row2');">Показать2</td>
    
    <td onclick="show_hide('row3');">Показать3</td>
        
</tr>

<tr id="row1" style="display:none"><td>Показано1</td></tr>

<tr id="row2" style="display:none"><td>Показано2</td></tr>

<tr id="row3" style="display:none"><td>Показано3</td></tr>

</table>

</body>

</html>



function show_hide(id)

{

var blockid = document.getElementById(id);

if (blockid.style.display == "none") blockid.style.display = "block";

else blockid.style.display = "none";

}

laimas 23.02.2017 21:32 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<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> 
</head>
<body>
<table>
<tr>
    <td onclick="show_hide('.as1')">Показать1</td>
    <td onclick="show_hide('.as2')">Показать2</td>
    <td onclick="show_hide('.as3')">Показать3</td>
</tr>
 
<tr class="as1" style="display:none"><td colspan="3">Показано1</td></tr>
<tr class="as1" style="display:none"><td colspan="3">Показано1</td></tr>
<tr class="as1" style="display:none"><td colspan="3">Показано1</td></tr>
 
<tr class="as2" style="display:none"><td colspan="3">Показано2</td></tr>
<tr class="as2" style="display:none"><td colspan="3">Показано2</td></tr>
<tr class="as2" style="display:none"><td colspan="3">Показано2</td></tr>
 
<tr class="as3" style="display:none"><td colspan="3">Показано3</td></tr>
<tr class="as3" style="display:none"><td colspan="3">Показано3</td></tr>
<tr class="as3" style="display:none"><td colspan="3">Показано3</td></tr>
</table>
</body>
</html>

рони 23.02.2017 21:36
найдите разницу пост№2 тут и пост №17 тут

JAMLIGHT 24.02.2017 11:46
Вы правы, скрипт функционирует также. У меня проблема в другом.Скрипт(этот тоже) не хочет нормально работать cтаблицей DataTable из под библиотеки cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js.Работают классы as1 и as3

рони 24.02.2017 12:08
Цитата:
Сообщение от JAMLIGHT
вместе со скриптом
 
$(document).ready(function(){ 
        $('#myTable').DataTable(); 

//где код ? 
    });

JAMLIGHT 24.02.2017 13:27 
<html>
 
 <head>
 
 <title>HTML код таблицы</title>

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

 </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 Nixon</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>



$(document).ready(function() {

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

} );



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

</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");  

}


Класс as1 не работает

JAMLIGHT 24.02.2017 14:15
Или так если понятнее. В коде явно присутствует ошибка, так как один из классов 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>

laimas 24.02.2017 14:17
Если http://cdn.datatables.net/1.10.13/js...aTables.min.js, то зачем show_hide('.as1')?

Цитата:
Сообщение от JAMLIGHT
Класс as1 и as6 работают через раз
Не наблюдается.

JAMLIGHT 24.02.2017 14:30
всмысле зачем?
<script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> -это скрипт таблицы из библиотеки

а ваш скрипт я хочу добавить для раскрытия нужных строк по группам.Хочу срастить ваш замечательный код с готовой таблицей для пущей функциональности . В данный момент в этой конструкции у меня не работает класс as1

laimas 24.02.2017 14:46
Распаковать, запустить, строки одинаковых классов раскрашены, работает?

Как может работать все, кроме...? Скрипт для всех один.

Цитата:
Сообщение от JAMLIGHT
это скрипт таблицы из библиотеки
Второпях прочел, показалось что это jQ.

JAMLIGHT 24.02.2017 15:18
Вложений: 1
Без скрипта таблицы http://cdn.datatables.net/1.10.13/js...aTables.min.js работает ваш код -я в курсе. В том то и дело. Потестите мой срощеный код -наблюдается задержка в некоторых браузерах(IE особенно),некорректныое отображения теста шапки.

laimas 24.02.2017 15:27
Цитата:
Сообщение от JAMLIGHT
Без скрипта таблицы http://cdn.datatables.net/1.10.13/js...aTables.min.js работает ваш код -я в курсе.
Ну а скрипт и я вместе с ним причем? Значит что-то мешает его работе, да и вообще, почитайте о методах этого плагина, может и не надо костылей внешних, а все есть в нем.

Цитата:
Сообщение от JAMLIGHT
некорректныое отображения теста шапки.
У вас вообще таблица, это нечто, в смысле верстки, подключать плагины и тестировать пока недосуг мне, а тем более в IE, отладчик не работает.

JAMLIGHT 24.02.2017 15:32
Ошибку нашёл -раскрываемые строки должны быть показаны филmтром количества показанных строк таблицы-функция этой таблицы Datatable

laimas 24.02.2017 17:07
Цитата:
Сообщение от JAMLIGHT
раскрываемые строки должны быть показаны филmтром количества показанных строк таблицы-функция этой таблицы Datatable
Я тоже нашел ошибку - где-то тут не хватает запятой. :)

JAMLIGHT 24.02.2017 18:17
Если кому надо вот выкладываю рабочий код со срощенным скриптом предложенном в этом посте с DataTable без ограничений по количеству показов.Всем спасибо
<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( {
        "paging":   false,
        "ordering": false,
        "info":     false
    } );
} );
</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>
            <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>

laimas 24.02.2017 18:48
Ну уж коли JQ, то можно его и задействовать, все равно таблицу получает:

$(function() {
    $('#myTable').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false
    }).find('table').on('click', 'td', function() {
        var tr = $(this).closest('#myTable').find('.'+$(this).data('box'))[0];
        tr.setAttribute('style',  tr.getAttribute('style') ? "" : "display:none");
    });
 );


А нативные обработчики убрать из таблицы:

<td data-box="as1">Надо развернуть1</td>
<td data-box="as2">Надо развернуть2</td>
<td data-box="as3">Надо развернуть3</td>
<td data-box="as4">Надо развернуть4</td>
<td data-box="as5">Надо развернуть5</td>
<td data-box="as6">Надо развернуть6</td>

рони 24.02.2017 19:33
laimas,
идея понятна но код не рабочий ...
Цитата:
Сообщение от рони
найдите разницу пост№2 тут и пост №17 тут
Цитата:
Сообщение от рони
$(document).ready(function(){ 2 $('#myTable').DataTable(); 3 4//где код ? 5 });
 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     #myTable tbody tr{
       display: none;
     }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <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() {
    $("#myTable").DataTable({
        "paging": false,
        "ordering": false,
        "info": false
    });
    $("#myTable").find("[data-box]").on("click", function() {
        var cls = "." + $(this).data("box");
        $(cls).toggle()
    })
});
  </script>
</head>

<body>
<table border="1" id="myTable" class="display">
        <thead>
            <tr>
                <th colspan="6">
                <table><thead><tr>
<td data-box="as1">Надо развернуть1</td>
<td data-box="as2">Надо развернуть2</td>
<td data-box="as3">Надо развернуть3</td>
<td data-box="as4">Надо развернуть4</td>
<td data-box="as5">Надо развернуть5</td>
<td data-box="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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <th>Brielle Williamson</th>
                <th>Office Manager</th>
                <th>London</th>
                <th>30</th>
                <th>2008/12/19</th>
                <th>$90,560</th>
            </tr>
            <tr class="as1" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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>
</html>

JAMLIGHT 24.02.2017 19:45
Пасибо. У рони код в сращивании изначально был рабочий, сори

рони 24.02.2017 19:48
Цитата:
Сообщение от JAMLIGHT
Приведи весь код в сборке, а то чё то у меня после замены таблица не инициализируется
не осилил

laimas 24.02.2017 19:53
Цитата:
Сообщение от рони
идея понятна но код не рабочий
Да вроде должно работать )

рони 24.02.2017 19:59
laimas,
}).find('table'). ничего не найдёт , плагин не возвращает таблицу
и далее код работает с 1 строкой а их несколько.

JAMLIGHT 24.02.2017 20:18
Цитата:
Сообщение от рони (Сообщение 445300)
не осилил
я тестил код от laimas

laimas 25.02.2017 03:53
Цитата:
Сообщение от рони
плагин не возвращает таблицу
Что же это за плагин такой...

JAMLIGHT 26.02.2017 19:59
возможно ли в этом коде привязать смену бэкграунда ячеек шапки к событию показа строк так чтобы при заполненном фильтре цвет не менялся без скрытия/раскрытия? 
<!DOCTYPE html>

<html lang="En">

<head>

  <title>Table</title>

  <meta charset="utf-8">
  
  <style type="text/css">
  
     #myTable tbody tr {

       display: none; }
  
  </style>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

  <script>

$(function() {

    $("#myTable").DataTable({

        "paging": false,

        

        "info": false

    });

    $("#myTable").find("[data-box]").on("click", function() {

        var cls = "." + $(this).data("box");

        $(cls).toggle()

    })

});

  </script>
  
   <script>

function ChangeColor(Element) {

if (Element.style.backgroundColor == 'green') Element.style.backgroundColor = 'red';

else Element.style.backgroundColor = 'green';

return false;

}

</script>

</head>



<body>

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

        <thead>

            <tr>

                <th colspan="6">

                <table><thead><tr>



<td data-box="as1"style="background-color: green;" onclick="return ChangeColor(this);">1</td>

<td data-box="as2"style="background-color: green;" onclick="return ChangeColor(this);">2</td>

<td data-box="as3"style="background-color: green;" onclick="return ChangeColor(this);">3</td>

<td data-box="as4"style="background-color: green;" onclick="return ChangeColor(this);">4</td>

<td data-box="as5"style="background-color: green;" onclick="return ChangeColor(this);">5</td>

<td data-box="as6"style="background-color: green;" onclick="return ChangeColor(this);">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="as0" >

                <th></th>

                <th>Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

    
            <tr class="as1" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

            <tr class="as1" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

            <tr class="as1" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

            <tr class="as1" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

            <tr class="as2" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>
            
            <tr class="as2" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>
    
            <tr class="as2" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>   
            
            <tr class="as2" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>
            </tr>

            <tr class="as3" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

            <tr class="as3" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

            <tr class="as3" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

             <tr class="as3" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

            <tr class="as4" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>
            
            <tr class="as4" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr> 
            
            <tr class="as4" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr> 
            
            <tr class="as4" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>   

            <tr class="as5" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>     

            <tr class="as5" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

            <tr class="as5" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

            <tr class="as5" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>
            </tr>

            <tr class="as6" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

            <tr class="as6" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

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

                <th>$320,800</th>

            </tr>

        </tbody>

    </table>

</body>

</html>

рони 26.02.2017 21:17
JAMLIGHT,
надо изучать api плагина и скрывать или показывать или выделять строки используя его, даже мой код скрытия/показа строк при наличии такого api неуместен.

JAMLIGHT 26.02.2017 21:35
Понятно.Изменю структуру таблицы

рони 26.02.2017 21:38
Цитата:
Сообщение от рони
Понятно.Изменю структуру таблицы
:blink: с документацией разберитесь, структура ни в чём не виновата.

рони 26.02.2017 22:17
фильтрация видимых строк таблицы
 
JAMLIGHT,
поиск и скрытие без плагина
<!DOCTYPE html>

<html lang="En">

<head>

  <title>Table</title>

  <meta charset="utf-8">

  <style type="text/css">

     #myTable tbody tr {

       display: none; }
     #myTable thead td.active{
          background-color: #FF0000;
     }
     #myTable thead td{
    background-color:  #008000;
  }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>

$(function() {
    var box = $("#myTable").find("[data-box]");
    box.on("click", function() {
        var cls = "." + $(this).data("box");
        var hide = $(this).toggleClass("active").is(".active")
        $(cls).toggle(hide)
    })

    $('#search').on('input', function () {
        var $rows = ""+$.map(box.filter(".active"),function(el) {
    return "." + $(el).data("box")
    });

        var val = '\(' + $.trim($(this).val()).split(/\s+/).join('|') + '\)',
            reg = RegExp(val, 'i'),
            text;
        $($rows).show().filter(function () {
            text = $(this).text();
            return !reg.test(text);
        }).hide();
    });
});

  </script>



</head>



<body>
<input id="search" name="search" value="" >
<table border="1" id="myTable" class="display">
        <thead>
            <tr>
                <th colspan="6">
                <table><thead><tr>
<td data-box="as1">Надо развернуть1</td>
<td data-box="as2">Надо развернуть2</td>
<td data-box="as3">Надо развернуть3</td>
<td data-box="as4">Надо развернуть4</td>
<td data-box="as5">Надо развернуть5</td>
<td data-box="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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <th>Brielle Williamson</th>
                <th>Office Manager</th>
                <th>London</th>
                <th>30</th>
                <th>2008/12/19</th>
                <th>$90,560</th>
            </tr>
            <tr class="as1" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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" >
                <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>

</html>

JAMLIGHT 28.02.2017 18:40
Супер.То что нужно и ничего лишнего.

JAMLIGHT 28.02.2017 19:13
а прикрутить сюда медленное разворачивание как здесь:https://webkab.ru/skript-dlya-svorac...enta-po-kliku/ реально? Наверно надо вcю таблицу переписывть через <DIV>

рони 28.02.2017 20:16
JAMLIGHT,
строки плохо анимируются, без танцев с бубнами

JAMLIGHT 12.03.2017 13:44
оказывается надо было изменить toggle(hide) на toggle(500)
:)

JAMLIGHT 12.03.2017 18:36
А кто может добавить грамотно пагинацию для динамических строк?


Часовой пояс GMT +3, время: 04:41.