Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.02.2017, 20:09
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 80

как обратьтися к элементам не по 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";

}
Ответить с цитированием
  #2 (permalink)  
Старый 23.02.2017, 21:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Последний раз редактировалось laimas, 23.02.2017 в 21:34.
Ответить с цитированием
  #3 (permalink)  
Старый 23.02.2017, 21:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

найдите разницу пост№2 тут и пост №17 тут
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2017, 11:46
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 80

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

Последний раз редактировалось JAMLIGHT, 24.02.2017 в 12:36.
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2017, 12:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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

//где код ? 
    });
Ответить с цитированием
  #6 (permalink)  
Старый 24.02.2017, 13:27
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 80

<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:24.
Ответить с цитированием
  #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.
Ответить с цитированием
  #8 (permalink)  
Старый 24.02.2017, 14:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

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

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

Последний раз редактировалось JAMLIGHT, 24.02.2017 в 14:44.
Ответить с цитированием
  #10 (permalink)  
Старый 24.02.2017, 14:46
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

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

Последний раз редактировалось laimas, 17.11.2018 в 16:51.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мотоциклисты есть? l-liava-l Оффтопик 13 04.07.2014 13:35
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Как добавить метод ко всем элементам? zubr80 Events/DOM/Window 3 06.04.2009 05:46
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55