|
Сообщение от thislegion
|
|
запрос в левой колонке был вверху?
|
так?
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css">'
<style>
.tablinks,
.tablinks2 {
font-size: 12px;
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif
}
.tablinks:hover,
.tablinks2:hover {
cursor: pointer;
color: white;
background-color: black;
}
tr .tablinks {
background-color: #C8C8C8
}
.leftable {
width: 20%;
}
</style>
</head>
<body>
<table id="mytable" class="leftable">
<thead>
<tr>
<th>
<div class="ui fluid icon input">
<input type="text" id="search" placeholder="Поиск1">
<i class="search icon"></i>
</div>
</th>
<th>
<div class="ui fluid icon input">
<input type="text" id="search-right" placeholder="Поиск2">
<i class="search icon"></i>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tablinks">Яблоко</td>
<td class="tablinks2">Яблоко</td>
</tr>
<tr>
<td class="tablinks">Банан</td>
<td class="tablinks2">Банан</td>
</tr>
<tr>
<td class="tablinks">Апельсин</td>
<td class="tablinks2">Апельсин</td>
</tr>
<tr>
<td class="tablinks">Киви</td>
<td class="tablinks2">Киви</td>
</tr>
<tr>
<td class="tablinks">Мандарин</td>
<td class="tablinks2">Мандарин</td>
</tr>
<tr>
<td class="tablinks">Арбуз</td>
<td class="tablinks2">Арбуз</td>
</tr>
<tr>
<td class="tablinks">Груша</td>
<td class="tablinks2">Груша</td>
</tr>
</tbody>
</table>
<script>
$(function() {
let listTR = $("#mytable tbody tr");
$("#search").keyup(function() {
let val = this.value.toLowerCase();
let arr = listTR.get().sort(function(a, b) {
a = a.querySelector('.tablinks').textContent.toLowerCase();
b = b.querySelector('.tablinks').textContent.toLowerCase();
a = a.indexOf(val);
b = b.indexOf(val);
if (b == -1 && a == -1) return 0;
if (b == -1) return -1;
if (a == -1) return 1;
return a - b;
});
$("#mytable tbody").append(arr);
});
});
</script>
</body>
</html>