СКРЫТИЕ ЭЛЕМЕНТОВ ТАБЛИЦЫ
Доброго времени суток!
помогите пожалуйста у меня есть таблица: <table> <tr id="a00"> <td>1</td> </tr> <tr id="a01"> <td>2</td> </tr> <tr id="a02"> <td>3</td> </tr> <tr id="a03"> <td>4</td> </tr> <tr id="a04"> <td>5</td> </tr> </table> - всего 5 строк у каждой свой id - как мне скрыть часть таблицы допустим со второй строки по последнюю или еще как нибудь.. Заранее, спасибо!:thanks: |
чем большем тем тем больше шансов на ответ - не правильная логика !
|
Цитата:
|
а насчет вашей проблемы:
используйте класс, к примеру : задайте класс 'hideTd' и потом скрывайте нужные елементы |
var allCells = [];
for (i=0;i<5;i++) {
var elem = document.getElementById("a0"+i);
allCells.push(elem);
}
allCells[2].style.visibility = 'hidden';
allCells[3].style.visibility = 'hidden';
|
Цитата:
|
добавить проверок
<style>
td {
border: solid 1px;
}
</style>
<table>
<tr id="a00">
<td>11</td>
<td>12</td>
</tr>
<tr id="a01">
<td>21</td>
<td>22</td>
</tr>
<tr id="a02">
<td>31</td>
<td>32</td>
</tr>
<tr id="a03">
<td>41</td>
<td>42</td>
</tr>
<tr id="a04">
<td>51</td>
<td>52</td>
</tr>
</table>
<button>hide</button>
<button>show</button>
<script>
window.onload = function () {
var elems = document.body.children;
var rows = elems[0].rows;
var len = rows.length;
for (var i = 0; i < len; i++) {
rows[i].style.display = 'block';
}
function sh(first, last, mode) {
var l = last - first;
if (l < len) {
var disp;
if (mode == 'hide') {
disp = 'none';
} else {
disp = 'block';
}
for (var i = first; i <= l; i++) {
if (rows[i].style.display != disp) {
rows[i].style.display = disp;
}
}
}
}
elems[1].onclick = function () {
var first = prompt('first', 1);
var last = prompt('last', 2);
sh(first, last, 'hide');
}
elems[2].onclick = function () {
var first = prompt('first', 1);
var last = prompt('last', 2);
sh(first, last, 'show');
}
}
</script>
|
так получше будет
<style>
td {
border: solid 1px;
}
</style>
<table>
<tr id="a00">
<td>11</td>
<td>12</td>
</tr>
<tr id="a01">
<td>21</td>
<td>22</td>
</tr>
<tr id="a02">
<td>31</td>
<td>32</td>
</tr>
<tr id="a03">
<td>41</td>
<td>42</td>
</tr>
<tr id="a04">
<td>51</td>
<td>52</td>
</tr>
</table>
<button>hide</button>
<button>show</button>
<script>
window.onload = function () {
var elems = document.body.children;
var rows = elems[0].rows;
var len = rows.length;
for (var i = 0; i < len; i++) {
rows[i].style.display = 'block';
}
function sh(first, last, mode) {
if (last < len) {
if (last == first) {
var l = last + 1;
} else
if (last > first) {
var l = last + 1;
}
} else {
return;
}
var disp;
(mode == 'hide') ? disp = 'none': disp = 'block';
for (var i = first; i < l; i++) {
if (rows[i].style.display != disp) {
rows[i].style.display = disp;
}
}
}
elems[1].onclick = function () {
var first = Number(prompt('first', 1));
var last = Number(prompt('last', 2));
sh(first, last, 'hide');
}
elems[2].onclick = function () {
var first = Number(prompt('first', 1));
var last = Number(prompt('last', 2));
sh(first, last, 'show');
}
}
</script>
|
Цитата:
|
Цитата:
В данном случае нужно либо использовать class либо rows . |
Цитата:
Цитата:
Цитата:
|
Цитата:
|
Немного изменил вариант от bes
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.row {
width: 100%;
display: flex;
}
.product-layout {
width: 40%;
}
td {
border: solid 1px;
}
tr.tr_hide {
display: none;
}
tr.tr_hide.active {
display: table-row;
}
</style>
<div class="row">
<div class="product-layout">
<table>
<tbody>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
<tr><td>41</td><td>42</td><td>43</td></tr>
<tr><td>51</td><td>52</td><td>53</td></tr>
</tbody>
</table>
<!-- Кнопки скрыть/показать -->
<button class="hide">hide</button>
<button class="show">show</button>
</div>
<div class="product-layout">
<table>
<tbody>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
<tr><td>41</td><td>42</td><td>43</td></tr>
<tr><td>51</td><td>52</td><td>53</td></tr>
</tbody>
</table>
<!-- Кнопки скрыть/показать -->
<button class="hide">hide</button>
<button class="show">show</button>
</div>
</div>
<script>
$(document).ready(function() {
function sh(first, last) {
$('table tbody').each(function(index, element) {
var elems = $(element);
var rows = elems[0].rows;
var len = rows.length;
if (len <= last){
return
}
for (var i = 0; i < len; i++) {
rows[i].classList.remove('tr_hide');
}
for (var i = last; i < len; i++) {
rows[i].classList.add('tr_hide');
}
})
}
$(document).on("click", ".hide", function () {
var index = $(this).index('.hide');
var currentLayout = $($('.product-layout')[index]);
var currentButton = currentLayout.find('.tr_hide').removeClass('active');
})
$(document).on("click", ".show", function () {
var index = $(this).index('.show');
var currentLayout = $($('.product-layout')[index]);
var currentButton = currentLayout.find('.tr_hide').addClass('active');
})
var first = Number(1);
var last = Number(3);
sh(first, last);
})
</script>
|
Цитата:
[html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. и загрузку jQuery добавьте. |
рони,Спасибо за подсказку!
А здесь есть возможность подписаться на тему? |
Цитата:
мой кабинет - опции - Методы подписки на темы Когда Вы создаете новую тему или отвечаете в теме, Вы можете выбрать автоматическое добавление этой темы так же тут вверху есть - опции темы |
| Часовой пояс GMT +3, время: 00:22. |