jQuery：如何清空具有相同属性值但保留第一个添加的 tds 的内容的重复表 tds 内容

Question

I have the following table structure (please find it below) and I am looking to empty duplicated content of only tds with class check that have same value of attribute value but keep the first added td.我有以下表结构（请在下面找到它），我正在寻找只有具有相同属性值但保留第一个添加的 td 的类检查的 td 的重复内容。

The table rows are added based on a slider value change event in some nested loops (hence duplicates and so I am emptying outside the loops and after rows are added but still inside some dynamic code).表格行是根据一些嵌套循环中的滑块值更改事件添加的（因此重复，所以我在循环外部清空，并且在添加行之后但仍在一些动态代码内）。

In the shown table, the desired result after filtering should include only the content of one td with value = "1", one td with value = "2" and one td with value = "3".在显示的表格中，过滤后的期望结果应该只包括一个值为“1”的td、一个值为“2”的td和一个值为“3”的td的内容。 I tried the solution shown on the table code below but it did not give correct results.我尝试了下表代码中显示的解决方案，但没有给出正确的结果。 I also tried this and this but the result is not exactly what I am looking for.我也试过这个和这个，但结果并不完全是我想要的。 Thanks for any ideas.感谢您的任何想法。

List item项目清单

jQuery snippets: 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; } });

My Table: ( Fiddle ) (the orders of rows is irrelevant as I want to keep the first added content and remove the content that has same duplicated value of attribute value shown as: empty this)我的表：（小提琴）（行的顺序无关紧要，因为我想保留第一个添加的内容并删除具有相同属性值重复值的内容，如下所示：清空此）

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

Answer 1

Look if this solution can be fine for your needs.看看这个解决方案是否可以满足您的需求。

I used a first loop on <tbody> rows ( <tr> ) and - for each row - a nested loop on <td> elements.我在<tbody>行（ <tr> ）上使用了第一个循环，并且 - 对于每一行 - 在<td>元素上使用嵌套循环。

Just a side note about your HTML: table headers shoud stay semantically inside a <thead> , not <tbody> .只是关于您的 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>

jQuery：如何清空具有相同属性值但保留第一个添加的 tds 的内容的重复表 tds 内容

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-04-30 14:27:09

jQuery：如何清空具有相同属性值但保留第一个添加的 tds 的内容的重复表 tds 内容

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-04-30 14:27:09

解决方案1
1 已采纳 2022-04-30 14:27:09