在 js table 搜索期间保持行填充

Question

我有一个 table，其中包含信息和一个简单的搜索功能，可以搜索所述 table 中的任何值。

使用 CSS 我设置了 table 的样式并给每一行 padding，但是当我使用搜索功能时它似乎忽略了 padding.

也许以下代码片段有用：

尝试搜索不存在的值，例如 Pink。有没有办法在整个搜索过程中保持填充，即使没有找到任何值？

var $rows = $('.list #data');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

table td:nth-child(1) {
 padding-right: 60px;
 border-left: 1px solid #D3E2E8;
}

table td:nth-child(2) {
 padding-right: 40px;
}

table td:nth-child(3) {
 padding-right: 40px;
}

table td:nth-child(4) {
 padding-right: 50px;
}

table td:nth-child(5) {
 padding-right: 10px;
}

th, td {
 border-bottom: 1px solid #D3E2E8;
}

tr:nth-child(even) {background-color: #E1F1F7}
tr:hover {background-color: #D0E5ED}

th {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="list">
<tr><th>Name</th><th>Lastname</th><th>Age</th><th>Shirt color</th><th>Favorite food</th></tr>
<tr id="data">
  <td>Brian</td>
  <td>Johnson</td>
  <td>17</td>
  <td>Blue</td>
  <td>Chicken tenders</td>
</tr>
<tr id="data">
  <td>Jessica</td>
  <td>Beloni</td>
  <td>18</td>
  <td>Green</td>
  <td>Pasta Pesto salad</td>
</tr>
<tr id="data">
  <td>Jason</td>
  <td>Popi</td>
  <td>19</td>
  <td>Yellow</td>
  <td>Mac and cheese</td>
</tr>
<tr id="data">
  <td>Daniel</td>
  <td>Soup</td>
  <td>34</td>
  <td>Grey</td>
  <td>Chicken Supreme pizza</td>
</tr>
</table>

<input type="text" id="search" placeholder="Search on any value">

Answer 1

var $rows = $('.list #data');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

table{
 width:100%;
}
table td{
width: 20%;
}
table td:nth-child(1) {
 padding-right: 60px;
 border-left: 1px solid #D3E2E8;
}

table td:nth-child(2) {
 padding-right: 40px;
}

table td:nth-child(3) {
 padding-right: 40px;
}

table td:nth-child(4) {
 padding-right: 50px;
}

table td:nth-child(5) {
 padding-right: 10px;
}

th, td {
 border-bottom: 1px solid #D3E2E8;
}

tr:nth-child(even) {background-color: #E1F1F7}
tr:hover {background-color: #D0E5ED}

th {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="list">
<tr><th>Name</th><th>Lastname</th><th>Age</th><th>Shirt color</th><th>Favorite food</th></tr>
<tr id="data">
  <td>Brian</td>
  <td>Johnson</td>
  <td>17</td>
  <td>Blue</td>
  <td>Chicken tenders</td>
</tr>
<tr id="data">
  <td>Jessica</td>
  <td>Beloni</td>
  <td>18</td>
  <td>Green</td>
  <td>Pasta Pesto salad</td>
</tr>
<tr id="data">
  <td>Jason</td>
  <td>Popi</td>
  <td>19</td>
  <td>Yellow</td>
  <td>Mac and cheese</td>
</tr>
<tr id="data">
  <td>Daniel</td>
  <td>Soup</td>
  <td>34</td>
  <td>Grey</td>
  <td>Chicken Supreme pizza</td>
</tr>
</table>

<input type="text" id="search" placeholder="Search on any value">

Answer 2

删除所有地方的 padding，并为您的 th 和 td.

替换为一些 width

var $rows = $('.list #data');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

table td:nth-child(1) {
    width: 100px;
    border-left: 1px solid #D3E2E8;
}
table th,
td {
    width: 120px;
}
th,
td {
    border-bottom: 1px solid #D3E2E8;
}
tr:nth-child(even) {
    background-color: #E1F1F7
}
tr:hover {
    background-color: #D0E5ED
}
th {
    text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="list">
    <tr>
        <th>Name</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>Shirt color</th>
        <th>Favorite food</th>
    </tr>
    <tr id="data">
        <td>Brian</td>
        <td>Johnson</td>
        <td>17</td>
        <td>Blue</td>
        <td>Chicken tenders</td>
    </tr>
    <tr id="data">
        <td>Jessica</td>
        <td>Beloni</td>
        <td>18</td>
        <td>Green</td>
        <td>Pasta Pesto salad</td>
    </tr>
    <tr id="data">
        <td>Jason</td>
        <td>Popi</td>
        <td>19</td>
        <td>Yellow</td>
        <td>Mac and cheese</td>
    </tr>
    <tr id="data">
        <td>Daniel</td>
        <td>Soup</td>
        <td>34</td>
        <td>Grey</td>
        <td>Chicken Supreme pizza</td>
    </tr>
</table>
<input type="text" id="search" placeholder="Search on any value">

在 js table 搜索期间保持行填充

Maintaining row padding during js table search

javascript

html

css

css-tables