jQuery：如何清空具有相同属性值但保留第一个添加的 tds 的内容的重复表 tds 内容
[英]jQuery: how to empty repeated table tds content that have same attribute value but keep the content of the first added tds
问题描述
我有以下表结构（请在下面找到它），我正在寻找只有具有相同属性值但保留第一个添加的 td 的类检查的 td 的重复内容。
表格行是根据一些嵌套循环中的滑块值更改事件添加的（因此重复，所以我在循环外部清空，并且在添加行之后但仍在一些动态代码内）。
在显示的表格中，过滤后的期望结果应该只包括一个值为“1”的td、一个值为“2”的td和一个值为“3”的td的内容。 我尝试了下表代码中显示的解决方案，但没有给出正确的结果。 我也试过这个和这个，但结果并不完全是我想要的。 感谢您的任何想法。
- 项目清单
jQuery 片段：
var seen = {}; $('.check').each(function() { var txt = $(this).attr('value'); if (seen[txt]) $(this).empty(); else seen[txt] = true; });
var map = {}; $(".check").each(function() { var value = $(this).attr('value'); if (map[value] == null) { map[value] = true; } else { $(this).empty(); } });
var seen = ''; $('.check').each(function() { var see = $(this).attr('value'); if (seen.match(see)) { $(this).empty(); } else { seen = seen + $(this).text(); } });
var seen = {}; $('.check').each(function() { var $this = $(this); if (seen[$this.attr('value')]) { $this.closest("tr").next("tr").find("td.check").empty(); } else { seen = seen + $this.text(); } });
var seen = {}; $('.check').each(function() { var $this = $(this); if (seen[$this.attr('value')]) { $this.closest("tr").next("tr").find(".check").empty(); } else { seen[$this.attr('value')] = true; } });
- 我的表：（小提琴）（行的顺序无关紧要，因为我想保留第一个添加的内容并删除具有相同属性值重复值的内容，如下所示：清空此）
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 4px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { var seen = {}; $('.check').each(function() { var $this = $(this); if (seen[$this.attr('value')]) { $this.closest("tr").next("tr").find("td.check").empty(); } else { seen[$this.attr('value')] = true; } }); }); }); </script> </head> <body> <table> <tbody> <tr> <th>New ID</th> <th>Year</th> <th>Make</th> <th>Model</th> <th>Build</th> <th>Pay</th> <th>Date</th> <th>From</th> <th>To</th> <th>Max</th> <th>Used ID</th> <th>Year</th> <th>Make</th> <th>Model</th> <th>Name</th> <th>Phone</th> <th>Cell</th> <th>Email</th> <th>Address</th> </tr> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="1">1<br /><a href="#">View</a></td> <td class="check" value="1">text1</td> <td class="check" value="1">text1</td> <td class="check" value="1">text1</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="2">2<br /><a href="#">View</a></td> <td class="check" value="2">text2</td> <td class="check" value="2">text2</td> <td class="check" value="2">text2</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="3">3<br /><a href="#">View</a></td> <td class="check" value="3">text3</td> <td class="check" value="3">text3</td> <td class="check" value="3">text3</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="2">empty this</td> <td class="check" value="2">empty this</td> <td class="check" value="2">empty this</td> <td class="check" value="2">empty this</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> </tbody> </table> <br> <button>Click</button> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2022-04-30 14:27:09
看看这个解决方案是否可以满足您的需求。
我在<tbody>行（ <tr> ）上使用了第一个循环，并且 - 对于每一行 - 在<td>元素上使用嵌套循环。
只是关于您的 HTML 的一个旁注：表头应该在语义上保持在<thead>内，而不是<tbody>内。
$(document).ready(function() { $("button").click(function() { let seen = []; // loop on rows $('.table tbody tr').each(function(rowIndex, rowElement) { // for each row, loop on tds with value attribute $(rowElement).find('td.check[value]').each(function(tdIndex, tdItem) { const attrValue = $(tdItem).attr('value'); // check value attribute if (!seen.includes(attrValue)) { // if attribute value is not present in array, push it seen.push(attrValue); // and break the tds loop in this row return false; } else { // else empty tds $(tdItem).empty(); } }) }) }) })
table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 4px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class='table'> <thead> <tr> <th>New ID</th> <th>Year</th> <th>Make</th> <th>Model</th> <th>Build</th> <th>Pay</th> <th>Date</th> <th>From</th> <th>To</th> <th>Max</th> <th>Used ID</th> <th>Year</th> <th>Make</th> <th>Model</th> <th>Name</th> <th>Phone</th> <th>Cell</th> <th>Email</th> <th>Address</th> </tr> </thead> <tbody> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="1">1<br /><a href="#">View</a></td> <td class="check" value="1">text1</td> <td class="check" value="1">text1</td> <td class="check" value="1">text1</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="2">2<br /><a href="#">View</a></td> <td class="check" value="2">text2</td> <td class="check" value="2">text2</td> <td class="check" value="2">text2</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td class="check" value="1">empty this</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="3">3<br /><a href="#">View</a></td> <td class="check" value="3">text3</td> <td class="check" value="3">text3</td> <td class="check" value="3">text3</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> <tr> <td>id</td> <td>year</td> <td>make</td> <td>model</td> <td>build</td> <td>pay</td> <td>date</td> <td>from</td> <td>to</td> <td>max</td> <td class="check" value="2">empty this</td> <td class="check" value="2">empty this</td> <td class="check" value="2">empty this</td> <td class="check" value="2">empty this2</td> <td>name</td> <td>phone</td> <td>cell</td> <td>email</td> <td>address</td> </tr> </tbody> </table> <button>Click</button>
如何通过退出返回true将值与许多表行中的所有所有表头tds进行比较？
[英]How to Compare a Value with all all table first tds in many table rows by returning true if exits?
如何获取表tds的类名并将其写入到使用jQuery的数组？
[英]How to get class names of table tds and write it to an array using jQuery?
jQuery：仅当第一个（：first）TD不包含文本（：empty）时，设置所有空子TD的样式
[英]jQuery: Style all empty child TDs only if the first (:first) TD contains no text (:empty)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.