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