23.02.2017, 20:09
|
 |
Аспирант
|
|
Регистрация: 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";
}
|
|
23.02.2017, 21:32
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
<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.
|
|
23.02.2017, 21:36
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
найдите разницу пост№2 тут и пост №17 тут
|
|
24.02.2017, 11:46
|
|
Аспирант
|
|
Регистрация: 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.
|
|
24.02.2017, 12:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от JAMLIGHT
|
|
вместе со скриптом
|
$(document).ready(function(){
$('#myTable').DataTable();
//где код ?
});
|
|
24.02.2017, 13:27
|
|
Аспирант
|
|
Регистрация: 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.
|
|
24.02.2017, 14:15
|
|
Аспирант
|
|
Регистрация: 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.
|
|
24.02.2017, 14:30
|
|
Аспирант
|
|
Регистрация: 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.
|
|
24.02.2017, 14:46
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Распаковать, запустить, строки одинаковых классов раскрашены, работает?
Как может работать все, кроме...? Скрипт для всех один.
|
Сообщение от JAMLIGHT
|
|
это скрипт таблицы из библиотеки
|
Второпях прочел, показалось что это jQ.
Последний раз редактировалось laimas, 17.11.2018 в 16:51.
|
|
|
|
