|
как обратьтися к элементам не по 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"; } |
<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> |
найдите разницу пост№2 тут и пост №17 тут
|
Вы правы, скрипт функционирует также. У меня проблема в другом.Скрипт(этот тоже) не хочет нормально работать cтаблицей DataTable из под библиотеки cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js.Работают классы as1 и as3
|
Цитата:
$(document).ready(function(){ $('#myTable').DataTable(); //где код ? }); |
<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 не работает |
Или так если понятнее. В коде явно присутствует ошибка, так как один из классов 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> |
Если http://cdn.datatables.net/1.10.13/js...aTables.min.js, то зачем show_hide('.as1')?
Цитата:
|
всмысле зачем?
<script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> -это скрипт таблицы из библиотеки а ваш скрипт я хочу добавить для раскрытия нужных строк по группам.Хочу срастить ваш замечательный код с готовой таблицей для пущей функциональности . В данный момент в этой конструкции у меня не работает класс as1 |
Распаковать, запустить, строки одинаковых классов раскрашены, работает?
Как может работать все, кроме...? Скрипт для всех один. Цитата:
|
Часовой пояс GMT +3, время: 18:34. |
|