在js表搜索期间维护行填充

Question

我有一个包含信息的表和一个简单的搜索功能来搜索所述表中的任何值。

使用CSS我设置表格并给每一行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

在任何地方删除padding，并将其替换为width和th的一些td。

＆＃13;

＆＃13;

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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;