如何比较ClassName，以便删除TD标签？
[英]How do I compare ClassNames so that I can remove a TD tag?
问题描述
I need to compare the class names of a <TD> and <TR> element. 
我需要比较<TD>和<TR>元素的类名称。 If they match, I need to be able to remove the TD when I click the TR . 如果它们匹配，则我需要能够在单击TR时删除TD 。 Here is some code : 这是一些代码：
$("#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>
Now I have it working so that I can add the TD when I click the TR , but the issue is that it keeps adding the TD . 现在，我可以使用它，以便单击TR时可以添加TD ，但问题是它一直在添加TD 。 I need to remove it once it has been added by clicking the TR again. 再次单击TR后，我需要将其删除。 In order to do that I need to compare the class names of the newly created TD and the existing TR . 为此，我需要比较新创建的TD和现有TR的类名。 If they match I need to remove it. 如果它们匹配，我需要将其删除。
3 个解决方案
解决方案1
2 已采纳 2019-02-11 22:29:53
Use .filter() to look for a td whose text matches the class of the tr you click on. 使用.filter()查找文本与您单击的tr的类匹配的td 。 If you find any, remove them, otherwise add a new one. 如果找到任何一个，请将其删除，否则添加一个新的。
$("#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
From your description you don't even need to compare classes. 根据您的描述，您甚至不需要比较类。 Which is handy as you never assign a class to the new cell. 这很方便，因为您从未将类分配给新单元格。
Instead show and hide the cell based on cell count 而是根据单元格计数显示和隐藏单元格
$("#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
Here is a workaround. 这是一种解决方法。 I use hide/show the <TD> instead of class comparison. 我使用隐藏/显示<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在反应组件中添加和删除类名？ - How do I add and remove classNames in a react component?
我如何获得每个值 <td> 我可以比较一下吗？ - How can I get each value in <td> so I can compare it?
我如何比较三个对象数组以便添加或删除新值？ - How can i compare three array of objects so i an add or remove new values?
我如何从中获取元素<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?
如何使用内联JavaScript或CSS隐藏TD标签？ - How can I hide a TD tag using inline JavaScript or CSS?
React：我如何访问一个属性<td>标签 - React: How can i access a attribute within a <td> tag
如何使用html标记分隔td中的单词？ - How can I separate words in td with an html tag?
如何从搜索输入中删除空格，使其与API标记（一个没有空格）匹配？ - How do I remove spaces from search input so that it matches an API tag (one which has no spaces)?
如何使用javascript / jQuery访问类名列表？ - How do I access the list of classnames using javascript/jQuery?
相关标签