jQuery：基於列數據隱藏表中的行
[英]jQuery : hide rows in table based on column data
問題描述
我有一個簡單的HTML表，它下面有一個HTML按鈕，如下所示。
<h2>HTML Table</h2> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>A</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>A</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>B</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>B</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>C</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>C</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> <button type="button">Hide A</button>
當我單擊該按鈕時，是否可以隱藏屬於公司A的所有行？
我知道我可以使用$(selector).hide()隱藏元素，但是我不確定如何只能基於某些值選擇/隱藏某些行？
3 個解決方案
解決方案1
1 2018-03-01 22:43:01
向每行添加一個帶有公司標識符的類：
<tr class="company-a">
<td>A</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
然后在您的jQuery中，您可以執行以下操作：
$('.company-a').hide()
我添加了一個小提琴以顯示其工作方式： https : //jsfiddle.net/qmrkdesf/6/
解決方案2
1 2018-03-01 22:43:08
您可以執行以下操作：
（請注意，通過標簽名稱選擇元素是一種不好的做法。您應該改為添加一些數據屬性，然后使用$('[data-my-table]')等。）
$(function() { $('button').on('click', () => { $('table td:first-child') .filter((_, cell) => $(cell).text() === 'A') .closest('tr') .hide(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> </head> <body> <h2>HTML Table</h2> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>A</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>A</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>B</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>B</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>C</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>C</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> <button type="button">Hide A</button> </body> </html>
解決方案3
1 已采納 2018-03-01 22:43:52
僅基於提供的示例html。 在您的點擊處理程序中，使用正確的選擇器來找到每個tr的第一個td，然后遍歷每個tr來執行決策邏輯將起作用：
$("tr td:first-child").each(function(index){
if($(this).text() === "A") {
$(this).closest("tr").hide();
}
});
jQuery-根據數組數據在表末添加html表列
[英]JQuery - Adding an html table column to end of table based on array data
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.