stackoom
  简体   繁体   中英

jQuery: how to empty repeated table tds content that have same attribute value but keep the content of the first added tds

 原文  2022-04-30 08:27:28  9   1    javascript/ html/ jquery/ css

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.

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". 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: 

 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>

1 answers

solution1
 1 ACCPTED  2022-04-30 14:27:09

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.

Just a side note about your HTML: table headers shoud stay semantically inside a <thead> , not <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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question select value of td and download content of selected tds How to Compare a Value with all all table first tds in many table rows by returning true if exits? jQuery: highlight TDs with same value by click on another TD how do I get, parse and sum all the tds' of a table with jQuery? PHP curl and DOM to get the content of the tables and tds How to get class names of table tds and write it to an array using jQuery? jQuery: Style all empty child TDs only if the first (:first) TD contains no text (:empty) JQuery add numbering to tds within a table row How to make TDs slide right with Jquery Get values of tds in a table
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM