Показать сообщение отдельно
  #13 (permalink)  
Старый 07.03.2024, 23:50
Новичок на форуме
Отправить личное сообщение для Сергей Fortoo Посмотреть профиль Найти все сообщения от Сергей Fortoo
 
Регистрация: 07.03.2024
Сообщений: 2

Немного изменил вариант от 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>

Последний раз редактировалось Сергей Fortoo, 09.03.2024 в 17:04. Причина: ПЫТАЮСЬ СДЕЛАТЬ КНОПКУ Посмотреть! и не получается
Ответить с цитированием