jsテーブル検索中に行パディングを維持する

Question

私は情報と上記テーブルの任意の値を検索する簡単な検索機能を持つテーブルを持っています。

CSSを使用してテーブルのスタイルを設定し、各行にpaddingを付けましたが、検索機能を使用すると、paddingは無視されたようです。

たぶん、次のコードスニペットは便利です：

はピンクのように存在しない値を検索してみてください。値が見つからなくても検索中にパディングを維持する方法はありますか？

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) { 
 
\t padding-right: 60px; 
 
\t border-left: 1px solid #D3E2E8; 
 
} 
 

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

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

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

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

 
th, td { 
 
\t 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を削除し、あなたのthとtdのためにいくつかのwidthと交換してください。あなたは `css` widthプロパティと` table`と `td`を修正する必要が

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

Answer 2

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{ 
 
\t width:100%; 
 
} 
 
table td{ 
 
width: 20%; 
 
} 
 
table td:nth-child(1) { 
 
\t padding-right: 60px; 
 
\t border-left: 1px solid #D3E2E8; 
 
} 
 

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

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

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

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

 
th, td { 
 
\t 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">