如何比較ClassName，以便刪除TD標簽？
[英]How do I compare ClassNames so that I can remove a TD tag?
問題描述
我需要比較<TD>和<TR>元素的類名稱。 如果它們匹配，則我需要能夠在單擊TR時刪除TD 。 這是一些代碼：
$("#button1").click(function() { $("table").find("tr:not(:nth-child(1))").remove(); }); $("tr").click(function() { $(this).append($("<td>", { text: $(this).attr("class") })); });
body { display: flex; justify-content: center; align-items: center; } #table td { padding: 25px; font-size: 25px; text-align: center; } #table th { font-size: 30px; padding: 25px } div { display: block; }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> </head> <body> <div> <table border="1" id="table"> <tr class="class1"> <th>Year</th> <th>Savings</th> </tr> <tr class="class2"> <td>2014</td> <td>$10000</td> </tr> <tr class="class3"> <td>2015</td> <td>$8000</td> </tr> <tr class="class4"> <td>2016</td> <td>$9000</td> </tr> </table> <p> <input id="button1" type="button" value="Click to remove all rows except first one" /> </p> </div> </body> </html>
現在，我可以使用它，以便單擊TR時可以添加TD ，但問題是它一直在添加TD 。 再次單擊TR后，我需要將其刪除。 為此，我需要比較新創建的TD和現有TR的類名。 如果它們匹配，我需要將其刪除。
3 個解決方案
解決方案1
2 已采納 2019-02-11 22:29:53
使用.filter()查找文本與您單擊的tr的類匹配的td 。 如果找到任何一個，請將其刪除，否則添加一個新的。
$("#button1").click(function() { $("table").find("tr:not(:nth-child(1))").remove(); }); $("tr").click(function() { var classname = $(this).attr("class"); var tr = $(this).find("td").filter(function() { return $(this).text() == classname; }); if (tr.length == 0) { $(this).append($("<td>", { text: classname })); } else { tr.remove(); } });
body { display: flex; justify-content: center; align-items: center; } #table td { padding: 25px; font-size: 25px; text-align: center; } #table th { font-size: 30px; padding: 25px } div { display: block; }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> </head> <body> <div> <table border="1" id="table"> <tr class="class1"> <th>Year</th> <th>Savings</th> </tr> <tr class="class2"> <td>2014</td> <td>$10000</td> </tr> <tr class="class3"> <td>2015</td> <td>$8000</td> </tr> <tr class="class4"> <td>2016</td> <td>$9000</td> </tr> </table> <p> <input id="button1" type="button" value="Click to remove all rows except first one" /> </p> </div> </body> </html>
解決方案2
0 2019-02-11 22:31:31
根據您的描述，您甚至不需要比較類。 這很方便，因為您從未將類分配給新單元格。
而是根據單元格計數顯示和隱藏單元格
$("#button1").click(function() { $("table").find("tr:not(:nth-child(1))").remove(); }); $("tr").click(function() { //If we have 2 cell add if($(this).find("td").length === 2) { $(this).append($("<td>", { text: $(this).attr("class") })); //Otherwise remove }else{ $(this).find("td:last-child").remove(); } });
body { display: flex; justify-content: center; align-items: center; } #table td { padding: 25px; font-size: 25px; text-align: center; } #table th { font-size: 30px; padding: 25px } div { display: block; }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> </head> <body> <div> <table border="1" id="table"> <tr class="class1"> <th>Year</th> <th>Savings</th> </tr> <tr class="class2"> <td>2014</td> <td>$10000</td> </tr> <tr class="class3"> <td>2015</td> <td>$8000</td> </tr> <tr class="class4"> <td>2016</td> <td>$9000</td> </tr> </table> <p> <input id="button1" type="button" value="Click to remove all rows except first one" /> </p> </div> </body> </html>
解決方案3
0 2019-02-11 22:58:54
這是一種解決方法。 我使用隱藏/顯示<TD>而不是類比較。
$("#button1").click(function() { $("table").find("tr:not(:nth-child(1))").remove(); }); $(".class2").click(function() { $(".TD2").toggleClass("show"); }); $(".class3").click(function() { $(".TD3").toggleClass("show"); }); $(".class4").click(function() { $(".TD4").toggleClass("show"); });
body { display: flex; justify-content: center; align-items: center; } #table td { padding: 25px; font-size: 25px; text-align: center; } #table th { font-size: 30px; padding: 25px } div { display: block; } .TD2, .TD3, .TD4 { display: none; } .show { display: block; }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> </head> <body> <div> <table border="1" id="table"> <tr class="class1"> <th>Year</th> <th>Savings</th> </tr> <tr class="class2"> <td>2014</td> <td>$10000</td> <td class="TD2">class2</td> </tr> <tr class="class3"> <td>2015</td> <td>$8000</td> <td class="TD3">class3</td> </tr> <tr class="class4"> <td>2016</td> <td>$9000</td> <td class="TD4">class4</td> </tr> </table> <p> <input id="button1" type="button" value="Click to remove all rows except first one" /> </p> </div> </body> </html>
我如何從中獲取元素<td> <><td/> JavaScript DOM 中的（td 標簽的子項）
[英]How Can I get element from <td><><td/> (td tag's child) in JavaScript DOM
我可以在 Tailwindcss 中提供類名，以便我可以在 javascript 中使用它們嗎？
[英]Can I give Classnames in Tailwindcss so i can use them in javascript?
如何從搜索輸入中刪除空格，使其與API標記（一個沒有空格）匹配？
[英]How do I remove spaces from search input so that it matches an API tag (one which has no spaces)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何在反應組件中添加和刪除類名？
我如何獲得每個值 <td> 我可以比較一下嗎？
我如何比較三個對象數組以便添加或刪除新值？
我如何從中獲取元素<td> <><td/> JavaScript DOM 中的（td 標簽的子項）
我可以在 Tailwindcss 中提供類名，以便我可以在 javascript 中使用它們嗎？
如何使用內聯JavaScript或CSS隱藏TD標簽？
React：我如何訪問一個屬性<td>標簽
如何使用html標記分隔td中的單詞？
如何從搜索輸入中刪除空格，使其與API標記（一個沒有空格）匹配？
如何使用javascript / jQuery訪問類名列表？
相關標簽